canvas 时钟示例

<canvas id="canvas1" width="400px" height="400px">
当前浏览器不支持canvas,请更换浏览器
</canvas>
<canvas id="canvas2" width="400px" height="400px">
当前浏览器不支持canvas,请更换浏览器
</canvas>
<canvas id="canvas3" width="400px" height="400px">
当前浏览器不支持canvas,请更换浏览器
</canvas>

/**
* code by lonelydawn
* 动态时钟效果
**/

//object   背景/表盘/刻度/指针

var clock=function(){
//canvas.context
var ctx;

//默认画布尺寸size
var size=400;
var date=new Date();

//表盘颜色
var color;

//json对象数组 ,保存时针、分针、秒针的属性
var pointers=[];

//标准API, target 目标节点, size 可选参数
var getContext=function(target,width,height){
target.width =width||target.width;
target.height=height||target.height;

return target.getContext("2d");
};

//模型宽高为size*size,根据所得宽高计算出比例以建立实际时钟
var getScale=function(origin){
return origin/size;
};

var getPointers=function(size){
return [
{
"name"	:"hour-pointer",
"number":0,
"length":size*7/40,
"width" :4,
"angle"	:0
},{
"name"	:"minute-pointer",
"number":0,
"length":size*3/10,
"width" :2,
"angle"	:0
},{
"name"	:"second-pointer",
"number":0,
"length":size*3/8,
"width" :1,
"angle"	:0
}
]
};

//根据传参date获取时间指针属性
var updatePointersProp=function(){

pointers[0].number=date.getHours()%12+1;
pointers[0].angle=30*(date.getHours()%12)+date.getMinutes()*0.5+date.getSeconds()*0.5/60;

pointers[1].number=date.getMinutes();
pointers[1].angle=date.getMinutes()*6+date.getSeconds()*0.1;

pointers[2].number=date.getSeconds();
pointers[2].angle=6*date.getSeconds();
};

//API:设置表盘颜色
var setColor=function(cl){
ctx.strokeStyle=cl;
ctx.fillStyle=cl;
};

//绘制背景
var drawBackground=function(){
// ctx.save();
ctx.fillStyle="#eee";
ctx.fillRect(0,0,size,size);
// ctx.restore();
};

//在个位数字前补0
var fmtTime=function(num){
return num<10?"0"+num:num;
}

//绘制时间文本
var drawTime=function(){
ctx.strokeText(fmtTime(date.getHours())+":"+fmtTime(date.getMinutes())+":"+
fmtTime(date.getSeconds()),size/20,size/20);
};

//绘制表盘
var drawTable=function(){
//表盘轮廓
ctx.beginPath();
//arc() 参数为弧度
ctx.arc(size/2,size/2,size*9/20,0,2*Math.PI);
ctx.stroke();

//中心圆点，固定红色
ctx.beginPath();
ctx.arc(size/2,size/2,5,0,2*Math.PI);
ctx.closePath();

ctx.save();

ctx.fillStyle="#f00";
ctx.fill();

ctx.restore();
};

//绘制刻度
var drawMark=function(){
//固定值
var r0=size*9/20,r1=size*7/16,r2=size*17/40;

for(var i=0;i<60;i++){
//位置会产生偏移，所以不采用模板设定
/**
* flg作用:
* 当i 为15,30,45,0时，单独设置刻度;
* 为3的倍数时，设置为大刻度;
* 为其他值的时候，设置为小刻度
**/
var flg=(i==15||i==30||i==45||i==0)?i:(i%5+1);
// alert(flg);
switch(flg){
case 15:
ctx.strokeText(""+i/5,size/2+Math.sin(6*i*Math.PI/180)*r1-7,
size/2-Math.cos(6*i*Math.PI/180)*r1+3);
break;
case 30:
ctx.strokeText(""+i/5,size/2+Math.sin(6*i*Math.PI/180)*r1-1,
size/2-Math.cos(6*i*Math.PI/180)*r1);
break;
case 45:
ctx.strokeText(""+i/5,size/2+Math.sin(6*i*Math.PI/180)*r1,
size/2-Math.cos(6*i*Math.PI/180)*r1+3);
break;
case 0:
//比较特殊，0点的位置正好是12点
ctx.strokeText(""+12,size/2+Math.sin(6*i*Math.PI/180)*r1-5,
size/2-Math.cos(6*i*Math.PI/180)*r1+10);
break;
case 1:
ctx.beginPath();
ctx.moveTo(size/2+Math.sin(6*i*Math.PI/180)*r0,size/2-Math.cos(6*i*Math.PI/180)*r0);
ctx.lineTo(size/2+Math.sin(6*i*Math.PI/180)*r2,size/2-Math.cos(6*i*Math.PI/180)*r2);
ctx.stroke();
break;
default:
ctx.beginPath();
ctx.moveTo(size/2+Math.sin(6*i*Math.PI/180)*r1,size/2-Math.cos(6*i*Math.PI/180)*r1);
ctx.lineTo(size/2+Math.sin(6*i*Math.PI/180)*r2,size/2-Math.cos(6*i*Math.PI/180)*r2);
ctx.stroke();
break;
}
}
};

//绘制指针
var drawPointers=function(){
for(var i=0;i<pointers.length;i++){
ctx.beginPath();
ctx.moveTo(size/2,size/2);
ctx.lineTo(size/2+Math.sin(pointers[i].angle*Math.PI/180)*pointers[i].length,
size/2-Math.cos(pointers[i].angle*Math.PI/180)*pointers[i].length);
ctx.lineWidth=pointers[i].width;
ctx.lineCap="round";
ctx.stroke();
}
};

//绘制全部元素
var drawAll=function(){
drawBackground();
drawTime();
drawTable();
drawMark();
drawPointers();
};

//API:创建静态表盘
var init=function(target,s){
//优先采用指定尺寸
size=s||400;

//内聚
ctx=getContext(target,s,s);

pointers=getPointers(s);
updatePointersProp();
};

//target目标元素 width,height,color可选参数
var buildStaticClock=function(target,size,color){
init(target,size);

if(color) setColor(color);

drawAll();
};

//使指针运动
var buildAnimateClock=function(target,size,color){
init(target,size);
if(color) setColor(color);

//使时钟动起来
setInterval(function(){
date=new Date();
updatePointersProp();
drawAll();
},1000);
};

//API:测试
var foo=function(){
//测试当前时间
// alert("当前时间  "+hour_pointer.number+":"+
// 	min_pointer.number+":"+sec_pointer.number);
//测试时间时针
// for(var i=0;i<24;i++){
// 	alert((i)%12+1);
// }
};

return {
setColor:setColor,
buildStaticClock:buildStaticClock,
buildAnimateClock:buildAnimateClock,
foo:foo
};
};

/**
* code by lonelydawn
**/

//创建时钟表盘
var clock1=new clock();
var clock2=new clock();
var clock3=new clock();

//测试
clock1.foo();

// clock.setColor("#f00");
// clock.buildStaticClock(document.getElementById("canvas"),400,400);

//参数1,canvas节点;参数2,画布大小;参数3,钟表颜色
clock1.buildAnimateClock(document.getElementById("canvas1"),200,"#f00");

clock2.buildAnimateClock(document.getElementById("canvas2"),300,"#0f0");

clock3.buildAnimateClock(document.getElementById("canvas3"),400,"#00f");