'use strict';
var clock = {
init: function(){
var _this = this;
_this.load();
setInterval(function(){
_this.load();
},1000)
},
load: function(){
var date = new Date();
this.hours = date.getHours(),
this.minutes = date.getMinutes(),
this.seconds = date.getSeconds(),
this.deg = Math.PI / 180;
this.canvas = document.getElementById('canvas'),
this.ctx = this.canvas.getContext('2d'),
this.width = this.canvas.height = 400,
this.height = this.canvas.width = 400;
this.ctx.translate(this.width/2, this.height/2); //居中处理
this.ctx.save(); //防止跟别的应用公用一个画布时冲突
this.hour(); //处理小时
this.minute(); //处理分钟
this.second(); //处理分钟
this.number(); //绘出数字
this.dotted(); //绘出点
this.ctx.restore(); //防止跟别的应用公用一个画布时冲突
},
hour: function(){
var ctx = this.ctx,
h = (this.hours * 5 + this.minutes / 12) * 6 *this.deg;
ctx.save(); //保存当前环境的状态,防止冲突
ctx.beginPath(); //起始一条路径
ctx.rotate(h); //按小时旋转当前绘图
ctx.moveTo(4, 10);
ctx.lineTo(0, -80);
ctx.lineTo(-4, 10);
ctx.fillStyle = '#000';
ctx.fill();
ctx.closePath(); //清除一条路径
ctx.restore(); //返回之前保存过的路径状态和属性
},
minute: function(){
var ctx = this.ctx,
m = (this.minutes + this.seconds / 60) * 6 * this.deg;
ctx.save();
ctx.beginPath();
ctx.rotate(m);
ctx.moveTo(3, 10);
ctx.lineTo(0, -120);
ctx.lineTo(-3, 10);
ctx.fillStyle = '#000';
ctx.fill();
ctx.closePath();
ctx.restore();
},
second: function(){
var ctx = this.ctx,
s = this.seconds * 6 * this.deg;
ctx.save();
ctx.beginPath();
ctx.rotate(s);
ctx.moveTo(2, 10);
ctx.lineTo(0, -150);
ctx.lineTo(-2, 10);
ctx.fillStyle = '#444';
ctx.fill();
ctx.closePath();
ctx.restore();
},
number: function(){
var ctx = this.ctx,
deg = Math.PI / 180,
i = 1;
ctx.save();
ctx.font = '20px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for(; i <= 12; i++) {
var s = deg * i * 30,
x = Math.sin(s)*150,
y = -Math.cos(s)*150;
ctx.fillText(i, x, y);
}
ctx.restore();
},
dotted: function(){
var ctx = this.ctx,
deg = Math.PI / 180,
i = 1;
ctx.save();
ctx.font = '20px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
for(; i <= 60; i++) {
var s = deg * i * 6,
x = Math.sin(s)*150,
y = -Math.cos(s)*150;
if( i%5 !== 0 ){
ctx.fillText('.', x, y);
}
}
ctx.restore();
}
}.init();
|
