canvas简介

1.canvas简介 
<canvas>元素看起来和<img>元素很像，唯一不同的是它没有src，alt这样的属性，实际上<canvas>标签只有两个属性，width和height。这些都是可选的，同样可以使用dom properties来设置。如不指定宽度和高度，Canvas会初始化为宽度为300像素，高度为150像素。也可以使用css来定义大小，但在绘制图像会伸缩以适应它的框架尺寸：如果css的尺寸与初始画布的比例不一致，它会出现扭曲。
表示画布

2.绘制图像 
var context=canvas.getcontext("2d")通过画布对象得到画布上下文对象，通过2d。二维平面上面开始后续操作
context.moveto（10,0）;起始位置
context.lineto(50,0);连接位置
context.stroke();描边
var canvas=document.getelementbyld("canvas");得到当前画布对象
var context=canvas.getcontext("2d");得到当前画布上下文对象，我们通过上下文来进行相应操作
context.moveto(10.100);
context.lineto(30.10);
context.lineto(50.100);
context.lineto(70.10);
context.stork()描边
context.linewith=10
context.storkestyle()描边颜色
context.fillstyle()填充颜色
beginpath()重置路径
去掉context.beginpath()未重置路径
添加context.closeoath();闭合路径
3.常用方法
context.createlineargradient 线条渐变

4. SVG简介 

可缩放矢量图 定义用于网络基本矢量图形 使用XML格式定义图片 万维网联盟标准
优势可通过文本编辑器创建修改 图像可被搜索 索引 脚本化或压缩