H5里有两个透明的标签，一个是video，另一个就是canvas。
canvas的兼容性是IE9+，性能高。
它就相当于画布 路径就是选区。
画图的步骤就是：
1.获取画布
var oC = document.querySelector('#c1');
2.创建画笔
var gd = oC.getContext('2d');
3.起始点 连接点 -> 路径 //moveTo lineTo
4.closePath(可选) 闭合
5.描边/填充 stroke/fill
line 理论上可以画任何图形
注意：
1.先做好选区后填充描边
2.先设置好画笔 后填充描边
3.注意抬起画笔 gd.beginPath.
例子：
画矩形
gd.strokeRect(x,y,w,h);
gd.fillRect(x,y,w,h);
gd.clearRect(x,y,w,h);
简易柱状图
1.分析
`strokeRect(x,y,w,h)`
`fillRect`
2.求最大值
`var arr=[300,200,50,800,150,900];`
`var iMax=Math.max.apply(null,arr);`
3.高度
循环创建 aHeight=[];
`aHeight[i] = arr[i]/iMax*oC.height;`
4.宽度
`var w = oC.width/(aHeight.length*3-2);`
`var iSpace = w*2;`
5.`for(var i = 0;i<aHeight.length;i++){
gd.fillStyle = '';
gd.fillRect((w+iSpace)*i,oC.height - aHeight[i],w,aHeight[i]);
}`
简易画板
事件 onmousedown onmousemove onmouseup
`gd.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
gd.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
gd.stroke();`
随机生成形状
`var arr = []; -> [{x:100,y:200}，{x:300,y:400}，{}，{}，{}]
arr[i] = {
x:rnd(0,oC.width),
y:rnd(0,oC.height)
};
gd.moveTo(arr[0].x,arr[0].y);
for(var i = 1;i<arr.length;i++){
gd.lineTo(arr[i].x,arr[i].y);
}
gd.closePath();
gd.stroke();`