[导读] 代码如下复制代码 以下是完整代码，保存到html文件可以查看效果。
HTML5时钟
<script type="text/javascript" language="javascript" charset="utf-8"><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>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>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>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>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>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>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>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>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></script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
