最近在看新浪体育网球频道（http://sports.sina.com.cn/tennis/）的时候，看到了下面的劳力士广告的时钟是用canvas做的，于是也实现了一个简单的canvas时钟。直接上代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>clock</title> </head> <body> <canvas id="clock" width="500" height="700"></canvas> <script type="text/javascript" src="js/clock.js"></script> </body> </html>
//时钟 function clock(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.clear = function() { var ctx = this.ctx; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) } //初始化调用 this.init = function() { //图片加载 var clockImage = new Image(); var that = this; clockImage.src = './images/clock.png'; clockImage.onload = function() { setInterval(function() { that.drawClock(clockImage); }, 1000) } } //画时钟 this.drawClock = function(img) { this.clear(); this.drawClockBg(img); this.drawTime(); } //画时钟背景 this.drawClockBg = function(img) { var ctx = this.ctx; ctx.drawImage(img, 0, 0, 500, 500); ctx.save(); //转到原点 ctx.translate(500 / 2, 500 / 2); //画数字 var clockRadius = 250; ctx.font = '36px Arial'; ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; for (var n = 1; n <= 12; n++) { var theta = (n - 3) * (Math.PI * 2) / 12; var x = clockRadius * 0.7 * Math.cos(theta); var y = clockRadius * 0.7 * Math.sin(theta); ctx.fillText(n, x, y); } ctx.restore(); } //画时间 this.drawTime = function() { // 获取时间 var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var temhours = hours > 12 ? hours - 12 : hours; var hour = temhours + minutes / 60; var minute = minutes + seconds / 60; var ctx = this.ctx; var clockRadius = 250; ctx.save(); ctx.fillStyle = '#000'; //重新转到时钟原点 ctx.translate(500 / 2, 500 / 2); //画时针 ctx.save(); //计算出线转动的角度 var theta = (hour - 3) * 2 * Math.PI / 12; ctx.rotate(theta); ctx.beginPath(); //通过画线划出时针 ctx.moveTo(-15, -5); ctx.lineTo(-15, 5); ctx.lineTo(clockRadius * 0.5, 1); ctx.lineTo(clockRadius * 0.5, -1); ctx.fill(); ctx.restore(); // 画分针 ctx.save(); var theta = (minute - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -4); ctx.lineTo(-15, 4); ctx.lineTo(clockRadius * 0.8, 1); ctx.lineTo(clockRadius * 0.8, -1); ctx.fill(); ctx.restore(); // 画秒针 ctx.save(); var theta = (seconds - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -3); ctx.lineTo(-15, 3); ctx.lineTo(clockRadius * 0.9, 1); ctx.lineTo(clockRadius * 0.9, -1); ctx.fillStyle = '#0f0'; ctx.fill(); ctx.restore(); ctx.restore(); //画当前时间 ctx.font = "60px impact"; ctx.fillStyle = '#960'; ctx.textAlign = 'center'; ctx.fillText((hours > 9 ? hours : '0' + hours) + ':' + (minutes > 9 ? minutes : '0' + minutes) + ':' + (seconds > 9 ? seconds : '0' + seconds), 250, 600); } } window.addEventListener('load', function() { canvas = document.getElementById('clock'); new clock(canvas).init(); });
这里的实现还是比较简单的。利用Date对象，获取当前的时间，然后画出当前时间点的钟表状态，最后用setInternval，每秒钟清除画布，重新再画一下一个钟表。里面用到的canvasAPI就不细说了，感兴趣的可以去了解一下canvas的API,它提供了很多强大的功能。