canvas
**1 由像素點(diǎn)構(gòu)成积蔚，位圖，放大會(huì)失真烦周；
2 h5新標(biāo)簽尽爆，只兼容高版本瀏覽器怎顾；
3 沒(méi)有屬性，沒(méi)有事件漱贱，要結(jié)合js使用杆勇；
4 性能高
**
- line
var canvas = document.getElementById('');
var gc = canvas.getContext('2d');
gc.beginPath();
gc.moveTo(x,y);
gc.lineTo(x,y);
....
gc.closePath();
gc.lineWidth=10;
gc.lineCap='round';
gc.lineJoin='bevel';
gc.strokeStyle = 'grey';
gc.stroke();
！饱亿！注意：線(xiàn)寬、顏色等設(shè)置一定要在stroke之前寫(xiě)闰靴；
lineCap是線(xiàn)條端點(diǎn)的樣式彪笼，默認(rèn)為butt，還可以設(shè)置round|square蚂且；
lineJoin是線(xiàn)條連接點(diǎn)的樣式配猫，默認(rèn)為miter，還可以設(shè)置round|bevel杏死。
- 矩形
gc.fillRect(x,y,w,h);
gc.strokeRect(x,y,w,h);
gc.clearRect(0,0,canvas.width,canvas.height);
- 圓形
gc.arc(cx,cy,r,start,end,false);
gc.fillStyle='yellow';
gc.stroke();
１靡蕖！注意：起始和結(jié)束的都是弧度淑翼，不是角度腐巢，要轉(zhuǎn)換(360度是2PI)；
false為設(shè)置是否是逆時(shí)針繪制玄括，通常為否冯丙；
圓形的繪制默認(rèn)是從右側(cè)開(kāi)始。
- 文字
gc.font ='20px 微軟雅黑';
var str='繪制文字';
gc.textBaseline='top';
gc.textAlign='center';
gc.strokeText(str,x,y);
Ｔ饩胃惜！注意：繪制文字textBaseline默認(rèn)是baseline，還可以設(shè)置top|middle|bottom哪雕。
- 導(dǎo)出圖片
var str=canvas.toDataURL();
var oImg=new Image();
oImg.src=str;
父級(jí).appendChild(oImg);
４场！注意：toDataURL返回的是base64編碼的圖片資源斯嚎。
- 給canvas添加事件
1 矩形/圓形：通過(guò)判斷鼠標(biāo)坐標(biāo)是否在區(qū)域內(nèi)利虫，檢測(cè)區(qū)域，添加事件
2 其他不規(guī)則圖形：(返回值是boolean)
gc.isPointInPath(ev.clientX,ev.clientY);
