H5里有兩個(gè)透明的標(biāo)簽，一個(gè)是video疹味，另一個(gè)就是canvas仅叫。
canvas的兼容性是IE9+帜篇，性能高。
它就相當(dāng)于畫布 路徑就是選區(qū)惑芭。
畫圖的步驟就是：
1.獲取畫布
var oC = document.querySelector('#c1');
2.創(chuàng)建畫筆
var gd = oC.getContext('2d');
3.起始點(diǎn) 連接點(diǎn) -> 路徑 //moveTo lineTo
4.closePath(可選) 閉合
5.描邊/填充 stroke/fill
line 理論上可以畫任何圖形
注意：
1.先做好選區(qū)后填充描邊
2.先設(shè)置好畫筆 后填充描邊
3.注意抬起畫筆 gd.beginPath.
例子：
畫矩形
gd.strokeRect(x,y,w,h);
gd.fillRect(x,y,w,h);
gd.clearRect(x,y,w,h);
簡(jiǎn)易柱狀圖
1.分析
`strokeRect(x,y,w,h)`
`fillRect`
2.求最大值
`var arr=[300,200,50,800,150,900];`
`var iMax=Math.max.apply(null,arr);`
3.高度
循環(huán)創(chuàng)建 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]);
}`
簡(jiǎn)易畫板
事件 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();`
隨機(jī)生成形狀
`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();`