标签：
基本思路，先画一个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()回到原始坐标。不然的话，每一次坐标变化都是基于前一次的坐标。
标签：
原文地址：http://www.cnblogs.com/fj0716/p/4766941.html
