canvas

canvas

**1 由像素点构成，位图，放大会失真；
2 h5新标签，只兼容高版本浏览器；
3 没有属性，没有事件，要结合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();

！！注意：线宽、颜色等设置一定要在stroke之前写；
lineCap是线条端点的样式，默认为butt，还可以设置round|square；
lineJoin是线条连接点的样式，默认为miter，还可以设置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();

！！注意：起始和结束的都是弧度，不是角度，要转换(360度是2PI)；
false为设置是否是逆时针绘制，通常为否；
圆形的绘制默认是从右侧开始。

• 文字

gc.font ='20px 微软雅黑';
var str='绘制文字';
gc.textBaseline='top';
gc.textAlign='center';
gc.strokeText(str,x,y);

！！注意：绘制文字textBaseline默认是baseline，还可以设置top|middle|bottom。

• 导出图片

var str=canvas.toDataURL();
var oImg=new Image();
oImg.src=str;
父级.appendChild(oImg);

！！注意：toDataURL返回的是base64编码的图片资源。

• 给canvas添加事件
  1 矩形/圆形：通过判断鼠标坐标是否在区域内，检测区域，添加事件
  2 其他不规则图形：(返回值是boolean)
  gc.isPointInPath(ev.clientX,ev.clientY);