canvas案例——画时钟

基本思路，先画一个200半径的圆

ctx.arc(250,250,200,0,2*Math.PI);

然后再画时分刻度，可以先利用translate变化坐标到圆的中心点，然后再通过rotate旋转

 1             //画12个时刻度线
 2             for(var i=0;i<12;i++){
 3                 ctx.save();
 4                 ctx.translate(250,250);
 5                 ctx.rotate(i*Math.PI/6);
 6                 ctx.moveTo(0,-180);
 7                 ctx.lineTo(0,-195);
 8                 ctx.stroke();
 9                 ctx.restore();
10             }
11             //画60个分刻度线
12              for(var i=0;i<60;i++){
13                  //经过时刻度跳过
14                  if(i%5!=0){
15                     ctx.save();
16                     ctx.translate(250,250);
17                     ctx.rotate(i*Math.PI/30);
18                     ctx.beginPath();
19                     ctx.strokeStyle="#555";
20                     ctx.moveTo(0,-190);
21                     ctx.lineTo(0,-195);
22                     ctx.closePath();
23                     ctx.stroke();
24                     ctx.restore();
25                  }
26             }

需要注意，在画刻度线时要用到save()和restore()

save()是保存原始的坐标，经过变换坐标后画刻度线，再restore()回到原始坐标。不然的话，每一次坐标变化都是基于前一次的坐标。