本文实例为大家分享了使用canvas绘制时钟的具体代码，供大家参考，具体内容如下
1. clock.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>canvas时钟</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
var canvas=document.getelementbyid("canvas");
var context=canvas.getcontext('2d');
//draw();
function draw(){
//得到当前系统的时分秒
var now=new date();
var sec=now.getseconds();
var min=now.getminutes();
var hour=now.gethours();
hour>=12&&(hour=hour-12);
var radius = math.min(canvas.width/2,canvas.height/2);
//初始化画布
context.save();
context.clearrect(0,0,canvas.width,canvas.height);
context.translate(canvas.width/2,canvas.height/2);
context.rotate(-math.pi/2);
context.save();
//表框
//小时刻度
context.strokestyle="black";
context.fillstyle="black";
context.linewidth=3;
context.linecap="round";
context.beginpath();
for(var i=0;i<12;i++){
context.rotate(math.pi/6);
context.moveto(radius-30,0);
context.lineto(radius-10,0);
}
context.stroke();
context.restore();
context.save();
//分钟刻度
context.linewidth=2;
context.beginpath();
for(var i=0;i<60;i++){
if(!i%5==0){
context.moveto(radius-15,0);
context.lineto(radius-10,0);
}
context.rotate(math.pi/30);
}
context.stroke();
context.restore();
context.save();
//画上时针
context.rotate((math.pi/6)*hour+(math.pi/360)*min+(math.pi/21600)*sec);
context.linewidth=6;
context.beginpath();
context.moveto(-10,0);
context.lineto(radius*0.5,0);
context.stroke();
context.restore();
context.save();
context.rotate((math.pi/30)*min+(math.pi/1800)*sec);
context.strokestyle="#29a8de";
context.linewidth=4;
context.linecap="butt";
context.beginpath();
context.moveto(-20,0);
context.lineto(radius*0.7,0);
context.stroke();
context.restore();
context.save();
context.rotate(sec*math.pi/30);
context.strokestyle="red";
context.linewidth=2;
context.linecap="butt";
context.beginpath();
context.moveto(-30,0);
context.lineto(radius*0.9,0);
context.stroke();
context.restore();
context.save();
context.linewidth=4;
context.strokestyle="gray";
context.beginpath();
context.arc(0,0,radius,0,math.pi*2,true);
context.stroke();
context.restore();
context.restore();
}
window.onload=function(){
setinterval(draw,1000)
}
</script>
</body>
</html>
2. javascript代码
<script>
var canvas=document.getelementbyid("canvas");
var context=canvas.getcontext('2d');
//draw();
function draw(){
//得到当前系统的时分秒
var now=new date();
var sec=now.getseconds();
var min=now.getminutes();
var hour=now.gethours();
hour>=12&&(hour=hour-12);
var radius = math.min(canvas.width/2,canvas.height/2);
//初始化画布
context.save();
context.clearrect(0,0,canvas.width,canvas.height);
context.translate(canvas.width/2,canvas.height/2);
context.rotate(-math.pi/2);
context.save();
//表框
//小时刻度
context.strokestyle="black";
context.fillstyle="black";
context.linewidth=3;
context.linecap="round";
context.beginpath();
for(var i=0;i<12;i++){
context.rotate(math.pi/6);
context.moveto(radius-30,0);
context.lineto(radius-10,0);
}
context.stroke();
context.restore();
context.save();
//分钟刻度
context.linewidth=2;
context.beginpath();
for(var i=0;i<60;i++){
if(!i%5==0){
context.moveto(radius-15,0);
context.lineto(radius-10,0);
}
context.rotate(math.pi/30);
}
context.stroke();
context.restore();
context.save();
//画上时针
context.rotate((math.pi/6)*hour+(math.pi/360)*min+(math.pi/21600)*sec);
context.linewidth=6;
context.beginpath();
context.moveto(-10,0);
context.lineto(radius*0.5,0);
context.stroke();
context.restore();
context.save();
context.rotate((math.pi/30)*min+(math.pi/1800)*sec);
context.strokestyle="#29a8de";
context.linewidth=4;
context.linecap="butt";
context.beginpath();
context.moveto(-20,0);
context.lineto(radius*0.7,0);
context.stroke();
context.restore();
context.save();
context.rotate(sec*math.pi/30);
context.strokestyle="red";
context.linewidth=2;
context.linecap="butt";
context.beginpath();
context.moveto(-30,0);
context.lineto(radius*0.9,0);
context.stroke();
context.restore();
context.save();
context.linewidth=4;
context.strokestyle="gray";
context.beginpath();
context.arc(0,0,radius,0,math.pi*2,true);
context.stroke();
context.restore();
context.restore();
}
window.onload=function(){
setinterval(draw,1000)
}
</script>
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
更多js+canvas绘制时钟效果。