JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5canvas绘制时钟效果。分享给大家供大家参考，具体如下：
HTML部分：
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <title>canvas绘图</title> </head> <bodyonload="init()"> <canvasid="canvas"width="200px"height="200px"></canvas> </body> </html>
JavaScript部分：
functioninit(){
varcanvas=document.getElementById("canvas"),
context=canvas.getContext("2d");
setInterval(function(){draw(canvas,context)},1000);
}
functiondraw(canvas,context){
varx=canvas.width,
y=canvas.height,
r=Math.min(x/2,y/2);
context.clearRect(0,0,x,y);//清除绘画历史
//绘画钟框
context.fillStyle="#f1f1f1";
drawCircle(context,x,y,r);
//绘画文字
vartx=x/2,ty=y/2,tr=0.8*r;
context.font="bold12px微软雅黑";
context.fillStyle="#000";
drawText(context,"1",tx+0.5*tr,ty-0.866*tr);
drawText(context,"2",tx+0.866*tr,ty-0.5*tr);
drawText(context,"3",tx+tr,ty);
drawText(context,"4",tx+0.866*tr,ty+0.5*tr);
drawText(context,"5",tx+0.5*tr,ty+0.866*tr);
drawText(context,"6",tx,ty+tr);
drawText(context,"7",tx-0.5*tr,ty+0.866*tr);
drawText(context,"8",tx-0.866*tr,ty+0.5*tr);
drawText(context,"9",tx-tr,ty);
drawText(context,"10",tx-0.866*tr,ty-0.5*tr);
drawText(context,"11",tx-0.5*tr,ty-0.866*tr);
drawText(context,"12",tx,ty-tr);
//获取当前时间
vardate=newDate(),
h=date.getHours(),
m=date.getMinutes(),
s=date.getSeconds(),
angleH=(360/12)*Math.PI/180,
angleM=(360/60)*Math.PI/180
context.strokeSyle="#000";
//绘制时刻度
drawScale(context,x,y,r,angleH,-0.88*r,-0.96*r,3);
//绘制分刻度
drawScale(context,x,y,r,angleM,-0.93*r,-0.96*r,1);
//绘画时分秒针
drawCircle(context,x,y,3);
drawNeedle(context,x,y,r,h*angleH+m*angleM/12,-0.5*r);
drawNeedle(context,x,y,r,m*angleM+s*angleM/60,-0.6*r);
drawNeedle(context,x,y,r,s*angleM,-0.75*r);
}
//绘画圆
functiondrawCircle(context,x,y,r){
context.save();
context.beginPath();
context.arc(x/2,y/2,r,0,Math.PI*2,0);
context.fill();
context.closePath();
context.restore();
}
//绘画文字方法
functiondrawText(context,text,x,y){
context.save();
x-=(context.measureText(text).width/2);
y+=4;
context.translate(x,y);
context.fillText(text,0,0);
context.restore();
}
//绘制刻度方法
functiondrawScale(context,x,y,r,rotate,start,end,lineWidth){
context.save();
context.beginPath();
context.translate(x/2,y/2);
context.lineWidth=lineWidth;
for(vari=0;i<60;i++){
context.rotate(rotate);
context.moveTo(0,start);
context.lineTo(0,end);
}
context.closePath();
context.stroke();
context.restore();
}
//绘画时分秒针方法
functiondrawNeedle(context,x,y,r,rotate,line){
context.save();
context.translate(x/2,y/2);
context.beginPath();
context.rotate(rotate);
context.moveTo(0,0.1*r);
context.lineTo(0,line);
context.closePath();
context.stroke();
context.restore();
}
希望本文所述对大家JavaScript程序设计有所帮助。