[導讀] 程式碼如下複製程式碼 以下是完整程式碼,儲存到html檔案可以查看效果。 HTML5時鐘 12 ## 程式碼如下 複製程式碼 #以下是完整程式碼,儲存到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物件。 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) {</p>ctx.beginPath();<p>ctx.moveTo.apply (ctx, this.start);<br>ctx.lineTo.apply(ctx, this.end);<br>ctx.closePath();<br>};<br><br>function Circle() { } ;<br>Circle.prototype = new canvObject();</p>Circle.prototype.draw = function (ctx) {<p>ctx.beginPath();<br>ctx.arc(0, 0, this.radius , 0, 2 * Math.PI, true);<br>ctx.closePath();<br>};<br><br>var circle = new Circle();<br>circle.ctx = ctx;<br>circle.x = 100;</p>circle.y = 100;<p>circle.radius = 90;<br>circle.fill = true;<br>circle.borderWidth = 6;<br>circle.fillColoror = '#ffffff';<br><br>var hour = new Line();<br>hour.ctx = ctx;<br>hour.x = 100;<br>hour.y = 100;</p> hour.borderColor = "#000000";<p>hour.borderWidth = 10;<br>hour.rotation = 0;<br>hour.start = [0, 20];<br>hour.end = [0, -50];<br><br>var minute = new Line();<br>minute.ctx = ctx;<br>minute.x = 100;<br>minute.y = 100;</p>minute. borderColor = "#333333";<p>minute.borderWidth = 7;<br>minute.rotation = 0;<br>minute.start = [0, 20];<br>minute.end = [0, -70 ];<br><br>var seconds = new Line();<br>seconds.ctx = ctx;<br>seconds.x = 100;<br>seconds.y = 100;</p>seconds.borderColor = "#ff0000";<p>seconds.borderWidth = 4;<br>seconds.rotation = 0;<br>seconds.start = [0, 20];<br>seconds.end = [0, -80]; <br><br>var center = new Circle();<br>center.ctx = ctx;</p>center.x = 100;<p>center.y = 100;<br>center.radius = 5; <br>center.fill = true;<br>center.borderColor = 'orange';<br><br>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" ;</p>cache.borderWidth = 2;###cache.rotation = i * 30;###cache.start = [0, -70];###cache.end = [0, -80];# ##}###<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/> #