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();
在绘制圆弧,三角形等时应成对使用