<canvas id="clock" width="500" height="500"></canvas>
function drawClock(){ var canvas = document.querySelector("#clock"); var ctx = canvas.getContext("2d"); drawDial(ctx); //绘制变盘 // 绘制时针、分针、秒针 var pi = Math.PI; var time = new Date(); var s = time.getSeconds(); var m = time.getMinutes(); var h = time.getHours(); var angleSecound = s*pi/30; var angleMinute = m*pi/30 + angleSecound/60; var angleHour = h*pi/6 + angleMinute/12; drawHand(angleSecound,190,2,"blue",ctx); drawHand(angleMinute,150,4,"green",ctx); drawHand(angleHour,80,6,"red",ctx); requestAnimationFrame(drawClock); } function drawHand(angle,length,width,color,ctx){ var pi = Math.PI; ctx.save(); ctx.translate(250,250); ctx.rotate(-pi/2 + angle); ctx.beginPath(); ctx.lineCap = "round"; ctx.moveTo(-4,0); ctx.lineTo(length,0); ctx.lineWidth = width; ctx.strokeStyle = color; ctx.stroke(); ctx.closePath(); ctx.restore(); } function drawDial(ctx){ var pi = Math.PI; ctx.clearRect(0,0,500,500); ctx.save(); //绘制外周圆弧 ctx.translate(250,250); ctx.strokeStyle="gray"; ctx.beginPath(); ctx.arc(0,0,200,0,2*pi); ctx.stroke(); ctx.closePath(); //绘制刻度 for(var i=0;i<60;i++){ ctx.save(); ctx.rotate(-pi/2 + i*pi/30); ctx.beginPath(); ctx.moveTo(180,0); ctx.lineTo(195,0); ctx.strokeStyle = i%5 ? "blue":"red"; ctx.lineWidth = i%5 ? "2":"4"; ctx.stroke(); ctx.closePath(); ctx.restore(); } ctx.restore(); } drawClock();
截图: