获取canvas对象
var canvas = document.getElementById("mycanvas");
canvas上下文
var ctx = canvas.getContext("2d");
设置属性
1、宽高:默认300 , 150
canvas.width
canvas.height
2、描边
ctx.strokeStyle 颜色值,渐变值,图案
3、清空
ctx.clearRect(x, y, w, h); 清空矩形
ctx.clearRect(0, 0, canvas.width, canvas.height); 清空整个
绘制直线
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
绘制图形
1、多边形
确定坐标,重复lineTo
2、矩形
ctx.strokeRect(x, y, w, h); 线框
ctx.fillRect(x, y, w, h); 填充
ctx.rect(x, y, w, h); 线框
ctx.stroke();
ctx.rect(x, y, w, h); 填充
ctx.fill();
3、正多边形
4、绘制曲线
5、绘制弧线