HTML5時鐘

 
 
 
 
 
 
 

柯乐义 原文 

HTML5时钟

 
柯乐义提示您，请使用支持HTML5的浏览器，例如Chrome,IE9,IE10,Firefox等。 

 
 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d') ; 
if (ctx) {
vartimerId; 
var 幀率= 60; 
函數canvObject() {
this.x = 0; 
這個.y = 0order; this = 0. ; 
this.borderColor = '#000000'; 
this.fill = false; 
this.fillColor = '#ff0000'; 
this.update = function () {
if (!this.
this.update = function () {
if (!this.cxorx)柯樂義提示：您沒有指定ctx 物件。 .fillColor; 
ctx.translate(this.x, this.y); 
if (this.rotation) ctx.rotate(this.rotation * Math.PI / 180); 
if (this.draw) this.draw( ctx); 
if (this.fill) ctx.fill(); 
ctx.中風(); 
ctx.restore(); 
} 
}； 
。 (); 
Line.prototype.fill = false; 
Line.prototype.start = [0, 0]; 
Line.prototype.end = [5, 5]; 
Line.prototype.draw = function (ctx) {
ctx.beginPath(); 
ctx.moveTo.apply(ctx, this.start); 
ctx.lineTo.apply(ctx, this.end); 
ctx.closePath(); 
}； ) { }; 
Circle.prototype = new canvObject(); 
Circle.prototype.draw = function (ctx) {
ctx.beginPath(); 
ctx.arc(0, 0, this.2, 0, 0. Math.PI, true); 
ctx.closePath(); 
}； 

var 圓= new Circle(); 
circle.ctx = ctx; 圓.x = 100; .半徑= 90; 
circle.fill = true; 
circle.borderWidth = 6; 
circle.fillColor = '#ffffff'; 

var hour = new Line(); = 100; 
小時.y = 100; 
hour.borderColor = "#000000"; 
hour.borderWidth = 10; 
hour.rotation = 0; 
hour. [0, -50]; 

var 分鐘= new Line(); 
分鐘.ctx = ctx; 
分鐘.x = 100; 
分鐘.y = 100; 
分鐘.borderorderColor = "#333333分鐘; .borderWidth = 7; 
分鐘.rotation = 0; 
分鐘.start = [0, 20]; 
分鐘.end = [0, -70]; 

var 秒= new Line(); 
秒. ctx; 
秒.x = 100; 
秒.y = 100; 
seconds.borderColor = "#ff0000"; 
秒.borderWidth = 4; 
.旋轉; 
秒.end = [0, -80]; 

var center = new Circle(); 
center.ctx = ctx; 
center.x = 100； 
center.y = 100； ; 
center.fill = true; 
center.borderColor = '橘色'; 

for (var i = 0, ls = [], cache; i cache = ls[i] = new Line (); 
cache.ctx = ctx; 
快取.x = 100; 
快取.y = 100； 
cache.borderColor = "橘色"; 
cache.borderWidth = 2;Lidth = "Hidmmo"; 
cache.borderWidth = 2; cache.start = [0, -70]; 
cache.end = [0, -80]; 
} 

timerId = setInterval(function () { 
//清除財務 clearRect(0). , 200); 
//填充背景色 
ctx.fillStyle = 'orange'; 
ctx.fillRect (0, 0, 200, 200); 
// 半徑 
c) 半徑var i = 0; cache = ls[i++]; ) cache.update(); 
//時針 
hour.rotation = (new Date()).getHours() * 30; 
hour.update(); /分針 
分鐘.rotation = (new Date()).getMinutes() * 6; 
分鐘.update(); 
//秒針 
seconds.rotation = (new Date()).getSeconds() * 6; seconds.update();  中心圓 
center.update(); 
}, 1000 / 幀速率) | 0); 
} else { 
alert('柯樂義提示：您的瀏覽器無法支援ML5557alert('柯樂義提示：您的瀏覽器無法支援ML5557alert。 '); 
} 
 
身體>