HTML5时钟-柯乐义 柯乐义 原文 HTML5时钟
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。 ');
}
身體>