Canvas 练习笔记

Tutorial

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

画弧：

var dom = document.getElementById('canvas');
var ctx = dom.getContext('2d');
ctx.arc(0, 0, r-5, 0, 2*Math.PI, false);

其中：ctx.arc(position-x,position-y,radius,begin arc,end arc,clockwise);

注意，开始角度为pi/2;如下图所示；

ctx.stroke();//描边

ctx.fill();//填充

画一个梯形：

var r = 200;
ctx.moveTo(-2 ,20);
ctx.lineTo( 2, 20);
ctx.lineTo( 1, -r + 18);
ctx.lineTo( -1, -r + 18);
ctx.fillStyle = '#c14543';
ctx.fill();

 

常用属性：

 位置相关：ctx.translate(x,y);//重新定义原点在画布中的位置

　　　　　 ctx.moveTo(x,y);将画图起始点移动到某个位置

               

ctx.store();
ctx.restore();

　　成对使用，保存当前左边原点的位置，完成绘制后再返回原来的位置；

ctx.lineWidth = 3;
ctx.lineCap= 'round';

设置线条宽度，设置线条形状

ctx.beginPath();
ctx.closePath();

在绘制圆弧，三角形等时应成对使用