绘制圆形

arc(x,y,半径,起止弧度,结束弧度,旋转方向)

• x,y : 圆心位置
• 弧度与角度的关系：弧度=角度*Math.PI/180
• 旋转方向：顺时针(默认：false)，逆时针(true)

例子

接下来我们就可以来画一个时钟了，首先表盘一圈是60个刻度，并且时钟的刻度比分钟的刻度长。所以不要一开始就来一个完整的大圆。

1. 清除画布。先用一个循环画60个6°的弧，这样就刚好是一整个圆，生成好了之后覆盖一个白色的圆，这样所有刻度都是分钟的刻度长度
2. 再画12个30°的弧，将之前的时钟刻度覆盖掉，再用一个小一点的白色的圆覆盖，这样时钟分钟的刻度就都画好了
3. 接着获得当地时间，计算弧度，绘制时针，分针，秒针
4. 设置定时器，1秒刷新一次，调用绘制函数

canvas时钟

绘制其他曲线

• arcTo(x1,y1,x2,y2,r) -x1,y1:第一组坐标;x2,y2:第二组坐标;r:半径
• guadraticCurveTo(dx,dy,x1,y1) -贝塞尔曲线:第一组控制点，第二组结束坐标
• bezierCurveTo(dx1,dy2,dx2,dy2,x1,y1) -贝塞尔曲线：第一组控制点，第二组控制点，第三组结束坐标

变换

• translate(x,y)：
  • 偏移：从起始点为基准点，移动到当前坐标位置
• rotate(r):
  • 旋转：以画布起点为旋转中心，参数为弧度
• scale(x,y):
  • 缩放：参数为缩放宽高比例

例子

绘制一个旋转的小方块

var ct = $('mycanvas1');
	var ctx = ct.getContext('2d');
	ctx.translate(100,100);//将画布起点平移到(100,100)处
	var num=0;
	setInterval(function() {
		num++;
		//清除画布，将上次绘制的图形清除掉，由于画布起点变成了(100,100)，因此清除画布时起点应定义为(-100,-100)
		ctx.clearRect(-100,-100,ct.width,ct.height);
		ctx.save();//保存当前的路径，即起点为(100,100)，画布清空的状态
		ctx.rotate(num*Math.PI/180);//以(100,100)为起点旋转
		ctx.translate(-25,-25);//将中心点移到(75,75)
		ctx.fillRect(0,0,50,50);//以(75,75)为起点绘制正方形
		ctx.restore();
	},20);