[导读] 代码如下复制代码 以下是完整代码,保存到html文件可以查看效果。HTML5时钟 代码如下 复制代码 以下是完整代码,保存到html文件可以查看效果。 HTML5时钟-柯乐义柯乐义 原文HTML5时钟柯乐义提示您,请使用支持HTML5的浏览器,例如Chrome,IE9,IE10,Firefox等。<br>var canvas = document.getElementById('canvas');<br>var ctx = canvas.getContext('2d');<br>if (ctx) {<br>var timerId;<br>var frameRate = 60;<br>function canvObject() {<br>this.x = 0;<br>this.y = 0;<br>this.rotation = 0;<br>this.borderWidth = 2;<br>this.borderColor = '#000000';<br>this.fill = false;<br>this.fillColor = '#ff0000';<br>this.update = function () {<br>if (!this.ctx) throw new Error('柯乐义提示:您没指定ctx对象。');<br>var ctx = this.ctx<br>ctx.save();<br>ctx.lineWidth = this.borderWidth;<br>ctx.strokeStyle = this.borderColor;<br>ctx.fillStyle = this.fillColor;<br>ctx.translate(this.x, this.y);<br>if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180);<br>if (this.draw) this.draw(ctx);<br>if (this.fill) ctx.fill();<br>ctx.stroke();<br>ctx.restore();<br>}<br>};<br>function Line() { };<br>Line.prototype = new canvObject();<br>Line.prototype.fill = false;<br>Line.prototype.start = [0, 0];<br>Line.prototype.end = [5, 5];<br>Line.prototype.draw = function (ctx) {<br>ctx.beginPath();<br>ctx.moveTo.apply(ctx, this.start);<br>ctx.lineTo.apply(ctx, this.end);<br>ctx.closePath();<br>};</p> <p>function Circle() { };<br>Circle.prototype = new canvObject();<br>Circle.prototype.draw = function (ctx) {<br>ctx.beginPath();<br>ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);<br>ctx.closePath();<br>};</p> <p>var circle = new Circle();<br>circle.ctx = ctx;<br>circle.x = 100;<br>circle.y = 100;<br>circle.radius = 90;<br>circle.fill = true;<br>circle.borderWidth = 6;<br>circle.fillColor = '#ffffff';</p> <p>var hour = new Line();<br>hour.ctx = ctx;<br>hour.x = 100;<br>hour.y = 100;<br>hour.borderColor = "#000000";<br>hour.borderWidth = 10;<br>hour.rotation = 0;<br>hour.start = [0, 20];<br>hour.end = [0, -50];</p> <p>var minute = new Line();<br>minute.ctx = ctx;<br>minute.x = 100;<br>minute.y = 100;<br>minute.borderColor = "#333333";<br>minute.borderWidth = 7;<br>minute.rotation = 0;<br>minute.start = [0, 20];<br>minute.end = [0, -70];</p> <p>var seconds = new Line();<br>seconds.ctx = ctx;<br>seconds.x = 100;<br>seconds.y = 100;<br>seconds.borderColor = "#ff0000";<br>seconds.borderWidth = 4;<br>seconds.rotation = 0;<br>seconds.start = [0, 20];<br>seconds.end = [0, -80];</p> <p>var center = new Circle();<br>center.ctx = ctx;<br>center.x = 100;<br>center.y = 100;<br>center.radius = 5;<br>center.fill = true;<br>center.borderColor = 'orange';</p> <p>for (var i = 0, ls = [], cache; i < 12; i++) {<br/>cache = ls[i] = new Line();<br/>cache.ctx = ctx;<br/>cache.x = 100;<br/>cache.y = 100;<br/>cache.borderColor = "orange";<br/>cache.borderWidth = 2;<br/>cache.rotation = i * 30;<br/>cache.start = [0, -70];<br/>cache.end = [0, -80];<br/>}</p><p>timerId = setInterval(function () {<br/>// 清除画布<br/>ctx.clearRect(0, 0, 200, 200);<br/>// 填充背景色<br/>ctx.fillStyle = 'orange';<br/>ctx.fillRect(0, 0, 200, 200);<br/>// 表盘<br/>circle.update();<br/>// 刻度<br/>for (var i = 0; cache = ls[i++]; ) cache.update();<br/>// 时针<br/>hour.rotation = (new Date()).getHours() * 30;<br/>hour.update();<br/>// 分针<br/>minute.rotation = (new Date()).getMinutes() * 6;<br/>minute.update();<br/>// 秒针<br/>seconds.rotation = (new Date()).getSeconds() * 6;<br/>seconds.update();<br/>// 中心圆<br/>center.update();<br/>}, (1000 / frameRate) | 0);<br/>} else {<br/>alert('柯乐义提示:您的浏览器不支持HTML5无法预览.');<br/>}<br/>