<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #000000;">您的浏览器不支持canvas </canvas> <script type="text/javascript"> var c =document.querySelector('#myCanvas'); // 标识画布并指明上下文 var ctx = c.getContext('2d'); // 1.表盘 ctx.lineWidth = 10; ctx.stroeStyle = '#000'; ctx.beginPath(); ctx.arc(250,250,200,0,360,false); ctx.stroke() ctx.closePath() // 刻度 // 时刻度 for (var i = 0; i < 12; i++) { ctx.save(); ctx.lineWidth= 8; ctx.strokeStyle = 'orange'; // 设置0,0点位置 ctx.translate(250,250); // 设置旋转角度 ctx.rotate(i*30*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,170); ctx.lineTo(0,190); ctx.stroke(); ctx.closePath(); ctx.restore() } // 分刻度 for (var i = 0; i < 60; i++) { ctx.save(); ctx.lineWidth= 4.5; ctx.strokeStyle = 'orange'; // 设置0,0点位置 ctx.translate(250,250); // 设置旋转角度 ctx.rotate(i*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,180); ctx.lineTo(0,190); ctx.stroke(); ctx.closePath(); ctx.restore() } // 时针 ctx.save(); ctx.lineWidth=7; ctx.strokeStyle="#000"; ctx.translate(250,250); ctx.rotate(270*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,110); ctx.lineTo(0,-10); ctx.stroke(); ctx.closePath(); ctx.restore(); // 分针 ctx.save(); ctx.lineWidth=5; ctx.strokeStyle="#000"; ctx.translate(250,250); ctx.rotate(210*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,130); ctx.lineTo(0,-10); ctx.stroke(); ctx.closePath(); ctx.restore(); // 秒针 ctx.save(); ctx.lineWidth=3; ctx.strokeStyle="#000"; ctx.translate(250,250); ctx.rotate(0*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,150); ctx.lineTo(0,-10); ctx.stroke(); ctx.closePath(); ctx.restore(); // 表盘中心 ctx.lineWidth=2; ctx.storeStyle='red'; ctx.beginPath(); ctx.arc(250,250,3.5,0,360,false); ctx.stroke(); ctx.fillStyle = 'white'; ctx.fill(); ctx.closePath(); // 设置时针，秒针前面的小圆点 ctx.translate(250,250); ctx.beginPath(); ctx.arc(0,140,2,0,360,false); ctx.stroke(); ctx.fillStyle="white"; ctx.fill(); ctx.closePath() </script> </body> </html>
