SVG
基本内容
SVG并不属于HTML5专有内容
HTML5提供有关SVG原生的内容
在HTML5出现之前,就有SVG内容
SVG,简单来说就是矢量图
SVG文件的扩展名为".svg"
SVG使用的是XML语法
概念
SVG是一种使用XML技术描述二维图形的语言
SVG的特点
SVG绘制图形可以被搜索引擎抓取
SVG在图片质量不下降的情况下,被放大
SVG与Canvas的区别
SVG
不依赖分辨率
支持事件绑定
大型渲染区域的程序(例如百度地图)
不能用来实现网页游戏
Canvas
依赖分辨率
不支持事件绑定
最合适网页游戏
保存为".jpg"格式的图片
用途
网页中一些小的图标
网页中动态特效(动画效果)
HTML5中使用SVG
使用<svg></svg>元素
作用 - 类似于<canvas>元素
默认大小为300px 150px
使用CSS样式
使用SVG绘制图形,必须定义<svg>元素中
绘制图形
矩形元素
<rect x="" y="" width="" height="" />
圆形元素
<circle cx="" cy="" r="" />
椭圆元素
<ellipse cx="" cy="" rx="" ry="">
直线元素
<line x1="" y1="" x2="" y2="" />
折线元素
<polyline points="">
多边形元素
<polygon points="" />
特效元素
渐变 - 渐变元素定义在<defs>元素内
线型渐变 - <linearGradient>
该元素是起始元素
<linearGradient x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
扇形(射线)渐变 - <radialGradient>
滤镜 - 高斯模糊
滤镜使用<filter>元素
<feGaussianBlur>元素 - 高斯模糊
in="SourceGraphic"
stdDeviation - 设置模糊程度
注意 - 定义在<defs>元素中
TWO.js
基本内容
JS库介绍
three.js - 专门用于绘制三维图形
two.js - 专门用于绘制二维图形
two.js支持的格式
SVG - 默认
Canvas
WebGL - 专门用于绘制图像
如何使用two.js
在HTML页面中引入two.js文件
在HTML页面中定义容器(<div>)
在javascript代码中
获取HTML页面中的容器
创建Two对象,将该对象添加到容器中
new Two(params).appendTo(Element);
使用two.js提供的API方法进行绘制
利用two.js提供的方法,设置图形
利用update()方法进行绘制
创建Two对象
构造器 - new Two(params)
params参数 - 设置当前对象的信息
type - 设置当前使用的格式(Two.Types.svg)
svg - 默认值
canvas
webgl
width和height - 设置宽度和高度
fullscreen - 设置是否全屏
Boolean值,true表示全屏
图形方法
makeLine() - 绘制线条
makeRectangle() - 绘制矩形
makeCircle() - 绘制圆形
makeEllipse() - 绘制椭圆
动画方法
update() - 更新动画
play() - 添加动画(循环)
pause() - 删除动画
设置绘制图形的样式
调用Two对象的绘制方法绘制图形时,返回该图形对象
通过该图形对象,设置相关属性值
分组操作
Two.Group
动画效果
bind(event,callback)方法 - 事件绑定
event - 绑定事件名称
update - 对应update()方法的作用
所有的DOM事件都可以绑定
callback - 事件处理函数