HTML5時鐘

[導讀] 程式碼如下複製程式碼 以下是完整程式碼，儲存到html檔案可以查看效果。 HTML5時鐘

12

## 程式碼如下

複製程式碼

#以下是完整程式碼，儲存到html檔案可以查看效果。

HTML5時鐘-柯樂義 柯樂義 原文 HTML5時鐘 柯樂義提示您，請使用支援HTML5的瀏覽器，例如Chrome,IE9,IE10,Firefox等。

ctx.beginPath(); ctx.moveTo.apply (ctx, this.start); ctx.lineTo.apply(ctx, this.end); ctx.closePath(); };

function Circle() { } ; Circle.prototype = new canvObject();

Circle.prototype.draw = function (ctx) { ctx.beginPath(); ctx.arc(0, 0, this.radius , 0, 2 * Math.PI, true); ctx.closePath(); };

var circle = new Circle(); circle.ctx = ctx; circle.x = 100;

circle.y = 100; circle.radius = 90; circle.fill = true; circle.borderWidth = 6; circle.fillColoror = '#ffffff';

var hour = new Line(); hour.ctx = ctx; hour.x = 100; hour.y = 100;

hour.borderColor = "#000000"; hour.borderWidth = 10; hour.rotation = 0; hour.start = [0, 20]; hour.end = [0, -50];

var minute = new Line(); minute.ctx = ctx; minute.x = 100; minute.y = 100;

minute. borderColor = "#333333"; minute.borderWidth = 7; minute.rotation = 0; minute.start = [0, 20]; minute.end = [0, -70 ];

var seconds = new Line(); seconds.ctx = ctx; seconds.x = 100; seconds.y = 100;

seconds.borderColor = "#ff0000"; seconds.borderWidth = 4; seconds.rotation = 0; seconds.start = [0, 20]; seconds.end = [0, -80];

var center = new Circle(); center.ctx = ctx;

center.x = 100; center.y = 100; center.radius = 5; center.fill = true; center.borderColor = 'orange';

for (var i = 0, ls = [], cache; i cache = ls[i] = new Line(); cache.ctx = ctx; cache.x = 100; cache.y = 100; cache.borderColor = "orange" ;

cache.borderWidth = 2;###cache.rotation = i * 30;###cache.start = [0, -70];###cache.end = [0, -80];# ##}### timerId = setInterval(function () { // 清除畫布 ctx.clearRect(0, 0, 200, 200); // 填滿背景色 ctx.fillStyle = ' orange'; ctx.fillRect(0, 0, 200, 200); // 錶盤 circle.update(); // 刻度 for (var i = 0; cache = ls[i++]; ) cache.update(); // 時針 hour.rotation = (new Date()).getHours() * 30; hour.update(); // 分針 minute.rotation = (new Date()).getMinutes() * 6; minute.update(); // 秒針 seconds.rotation = (new Date ()).getSeconds() * 6; seconds.update(); // 中心圓 center.update(); }, (1000 / frameRate) | 0); } else { alert('柯樂義提示：您的瀏覽器不支援HTML5無法預覽.'); }

#

HTML5實作時鐘效果

HTML5時鐘