1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
| //绘制表盘 ctx.beginPath(); ctx.arc(250,250,250,0,Math.PI*2); ctx.fillStyle="black"; ctx.fill(); //改变画布的旋转中心点,通过位移 ctx.translate(250,250); //绘制刻度线 for(var i=0;i<12;i++){ ctx.save(); ctx.beginPath(); ctx.rotate(i*(Math.PI/6)); ctx.moveTo(0,-250); ctx.lineTo(0,-195); ctx.lineWidth=20; ctx.lineCap="round"; ctx.strokeStyle="white"; ctx.stroke(); ctx.restore(); for(var j=1;j<5;j++){ ctx.save(); ctx.beginPath(); ctx.rotate(i*(Math.PI/6) + j*(Math.PI/5)); ctx.moveTo(0,-247); ctx.lineTo(0,-210); ctx.lineWidth=10; ctx.lineCap="round"; ctx.strokeStyle="green"; ctx.stroke(); ctx.restore(); } } //画时针 ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100,0); ctx.lineCap="round"; ctx.lineWidth=15; ctx.strokeStyle="blue"; ctx.stroke(); //画分针 ctx.rotate(Math.PI/6); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(120,0); ctx.lineCap="round"; ctx.lineWidth=13; ctx.strokeStyle="gray"; ctx.stroke(); //画秒针 ctx.rotate(Math.PI/6); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(140,0); ctx.lineCap="round"; ctx.lineWidth=9; ctx.strokeStyle="cyan"; ctx.stroke(); //画表盘中心点 ctx.beginPath(); ctx.arc(0,0,15,0,Math.PI*2); ctx.fillStyle="white"; ctx.fill();
|