具体做法为多增加一个画布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="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); }
最终成果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phperz。
相关阅读 :
js Canvas实现圆形时钟教程
js Canvas绘制圆形时钟教程
js Canvas绘制圆形时钟效果
js Canvas实现的日历时钟案例分享
js canvas实现擦除动画
canvas 绘制圆形时钟
canvas实现粒子时钟效果
JS+Canvas实现的俄罗斯方块游戏完整实例
JavaScript Canvas绘制圆形时钟效果
js canvas实现放大镜查看图片功能
原生JS+Canvas实现五子棋游戏实例
js+html5实现canvas绘制圆形图案的方法
相关文章
精彩导读
热门资讯
关注我们
