具体做法为多增加一个画布canvas元素。既然我们已经能从Date()中获取时间，那么显示数值的来源不成问题。读者唯一需要知道的就是利用setInterval(thingstodo(),interval)方法来实现每秒更新一次指数。
修改后的canvas.html
<html> <head> <title>Canvas clock tutorial</title> <style type="text/css"> canvas { border: 1px solid black; } #display {position: absolute; top:8; left:8;} </style> <script src="https://www.jb51.net/draw.js" type="text/javascript"></script> </head> <body> <canvas></canvas> <canvas></canvas> </body> </html>
修改后的draw.js
function draw() { var canvas = document.getElementById('clock'); var displayCanvas = document.getElementById('display'); var currentTime = new Date(); var hour = (currentTime.getHours()%12) * Math.PI/6; var minute = currentTime.getMinutes() * Math.PI/30; var second = currentTime.getSeconds() * Math.PI/30; hour = hour - Math.PI * (1/2); minute = minute - Math.PI * (1/2); second = second - Math.PI * (1/2); if (canvas.getContext){ var ctx = canvas.getContext('2d'); var ctxD = displayCanvas.getContext('2d'); showDisplay(ctxD, currentTime); var s = Math.PI / 1800; var m = s / 60; var h = m / 12; var rotate = requestAnimationFrame(step); function step(){ second = second + s; minute = minute + m; hour = hour + h; if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } if(minute >= Math.PI * (3/2)){ minute = Math.PI * (-1/2); } if(second >= Math.PI * (3/2)){ second = Math.PI * (-1/2); } ctx.clearRect(0, 0, 400 , 400); ctx.beginPath(); //绘制圆形轮廓 drawCircle(ctx, 100, hour, '#99ff00'); drawCircle(ctx, 120, minute, '#99ff66'); drawCircle(ctx, 140, second, '#66cc66'); requestAnimationFrame(step); } } } function drawCircle(ctx, radius ,endAngle, color){ ctx.beginPath(); ctx.moveTo(200,200-radius); ctx.strokeStyle = color; ctx.lineWidth = 20; ctx.arc(200,200,radius,Math.PI*(-1/2),endAngle,false); ctx.stroke(); } function showDisplay(ctx, date){ var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds(); //计时文字样式 ctx.font = "13px Sans-Serif"; ctx.textAlign = "center"; ctx.strokeText(h+":"+m+":"+s,200,200); var timmer = setInterval(function(){ s++; if(s>=60){ m++; s=0; } if(m>=60){ h++; m=0; } if(h>=24){ h=0; } ctx.clearRect(0,0,400,400); ctx.strokeText(h+":"+m+":"+s,200,200); },1000); }
最终成果图如下：
