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 フレームレート = 60; <br>関数 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.ストロークスタイル = 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.ストローク(); <br>ctx.restore(); <br>} <br>}; <br>関数 Line() { }; <br>Line.prototype = 新しい 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>}; <br><br>関数 Circle() { }; <br>Circle.prototype = 新しい 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>}; <br><br>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'; <br><br>var 時間 = new Line(); <br>時間.ctx = ctx; <br>時間.x = 100; <br>時.y = 100; <br>hour.borderColor = "#000000"; <br>hour.borderWidth = 10; <br>時.回転 = 0; <br>hour.start = [0, 20]; <br>hour.end = [0, -50]; <br><br>var minutes = new Line(); <br>分.ctx = ctx; <br>分.x = 100; <br>分.y = 100; <br> minutes.borderColor = "#333333"; <br>分.borderWidth = 7; <br>分.回転 = 0; <br> minutes.start = [0, 20]; <br> minutes.end = [0, -70]; <br><br>var 秒 = new Line(); <br>秒.ctx = ctx; <br>秒.x = 100; <br>秒.y = 100; <br>秒.borderColor = "#ff0000"; <br>秒.borderWidth = 4; <br>秒.回転 = 0; <br>秒.開始 = [0, 20]; <br>秒.end = [0, -80]; <br><br>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 = 'オレンジ'; <br><br>for (var i = 0, ls = [], キャッシュ; i cache = ls[i] = new Line(); <br>キャッシュ.ctx = ctx; <br>cache.x = 100; <br>cache.y = 100; <br>cache.borderColor = "オレンジ"; <br>cache.borderWidth = 2; <br>cache.rotation = i * 30; <br>cache.start = [0, -70]; <br>cache.end = [0, -80]; <br>} <br><br>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; キャッシュ = ls[i++]; ) <br>//時間针 <br>hour.rotation = (new Date()).getHours() * 30; <br>hour.update(); <br>// 分针 <br>minutes() * 6; .update(); <br>// 秒针 <br>秒.rotation = (new Date()).getSeconds() * 6; <br>秒.update(); <br>// 中心圆 <br>center.update(); <br>} 1000 / フレームレート) 0); <br>} else { <br>alert('柯乐义提示：您的浏览器不支持HTML5無法预览。'); <br>} <br>
