canvas绘制形状

1.1 绘制形状

---

1.1.1 绘制矩形

• 绘制矩形路径

ctx.rect（startX, startY, width, height）;

• 绘制矩形框（描边矩形）

ctx.strokeRect（startX, startY, width, height）;

• 绘制填充矩形

ctx.fillRect（startX, startY, width, height）;

• 清除矩形区域

ctx.clearRect（startX, startY, width, height）;

案例

利用绘制图形与清除矩形区域, 可以实现简单的动画. 例如代码:

...

var x = 10, y = 10, oldx = 10, oldy = 10;

var width = 100, height = 50;

var intervalId = setInterval(function () {

ctx.clearRect( oldx - 1, oldy - 1, width + 2, height + 2 );

ctx.strokeRect( x, y, width, height );

oldx = x;

oldy = y;

x += 4;

y += 2;

if ( oldy >= 200 ) {

// clearInterval( intervalId );

x = 10, y = 10;

}

}, 20);

简单效果

有时为了简单常常将整个画布都清除, 这样就不用每次计算清除的问题.

ctx.clearRect( 0, 0, cas.width, cas.height );

// 也可以设置画布宽度, 这样就会自动清除

cas.width = cas.width;

1.2.1 绘制圆弧

1.2.1.1 绘制圆弧

    注意：要用弧度，不能用角度

ctx.arc(圆心的x坐标，圆心的y坐标，圆的半径，圆的开始弧度，圆的结束弧度)

1.2.1.2 绘制扇形

绘制扇形的重点是需要设置起始位置为圆心点，然后闭合路径即可

//把角度转换为弧度

function angleToRadian( angle ){

    return Math.PI / 180 * angle;

}

...

ctx.moveTo(100,100)；

ctx.arc(100,100,0,angleToRadian(90));

ctx.closePath();

ctx.fill();