canvas和svg

1、canvas和svg简介:

canvas和svg是html5新增的标签，用于在页面上绘制图像，但是他们还是有很多的不同点的。

canvas的特点	svg的特点
绘制的是位图	绘制的矢量图(缩放不会失帧)
通过JavaScript来控制 进行绘制	可以用html绘制也可以用JavaScript绘制
主要用于网页游戏 动画等等	主要用于静态图像
不可以通过CSS设计宽高	可以通过CSS设置宽高

2、canvas和svg的属性和方法

canvas的属性和方法	说明
getContext(‘2d’)	获取画笔
fillStyle	设置填充的颜色
strokeStyle	设置边框的颜色
createLinearGradient()	创建线性渐变
createRadialGradient()	创建辐射性渐变
lineCap	设置线头末端的样式
lineJoin	设置两条线相交的拐角处样式
rect()	绘制矩形
fillRect()	绘制被填充的矩形
fill()	填充当前的绘图
stroke()	绘制定义好的路径
beginPath()	开始一条路径
moveTo()	路径移动到指定的坐标
lineTo()	添加一个新的点，从创建的点绘制到结束的点
closePath()	结束一条路径
rotate()	旋转绘制的图
drawImage()	向画布上绘制图像

svg的标签	说明
line	定义线条
polyline	定义折线
rect	定义矩形
circle	定义圆
ellipse	定义一个椭圆
font	定义字体
g	分组
注意	以上都是标签，可以直接在svg中绘制也可以用JavaScript来控制

3、canvas和svg的例子：

用canvas在页面上画一个坐标轴

这里需要的注意的是，不用结束绘制路径，重新创建一个点来绘制即可。

canvas的作用还有很多很多可以绘制我们常见的统计图


这是手动去添加写入的，更好的方法，是用循环去往页面添加和写入，绘制这种统计图还有更方便的方法，那就是使用two.js(点击了解更多)

那么使用完canvas我们来看看svg，我们可以用svg绘制许多小图标，这里给大家推荐一个网站里面有许多丰富的矢量图请点击前往阿里巴巴矢量图标库
使用svg绘制一个中国象棋的棋盘


在使用JavaScript绘制矢量图的时候需要注意，有很多跟DOM有微小的差别需要注意。绑定事件可以直接绑定到具体的某个元素上，跟canvas相比这一点还是比较方便的。