canvas

172 阅读1分钟

获取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、绘制弧线