用canvas绘制了一个钟表，废话不多说了，直接上代码吧。效果图如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas钟表</title>
<meta name="keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{margin:0;}
</style>
</head>
<body onload="run()">
<canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到这段文字，说明你的浏览器弱爆了！</canvas>
<script>
window.onload=draw;
function draw() {
var canvas=document.getelementbyid('canvas');
var context=canvas.getcontext('2d');
context.save(); ///////////////////////////////////保存
context.translate(200,200);
var deg=2*math.pi/12;
//////////////////////////////////////////////////表盘
context.save();
context.beginpath();
for(var i=0;i<13;i++){
var x=math.sin(i*deg);
var y=-math.cos(i*deg);
context.lineto(x*150,y*150);
}
var c=context.createradialgradient(0,0,0,0,0,130);
c.addcolorstop(0,"#22f");
c.addcolorstop(1,"#0ef")
context.fillstyle=c;
context.fill();
context.closepath();
context.restore();
//////////////////////////////////////////////////数字
context.save();
context.beginpath();
for(var i=1;i<13;i++){
var x1=math.sin(i*deg);
var y1=-math.cos(i*deg);
context.fillstyle="#fff";
context.font="bold 20px calibri";
context.textalign='center';
context.textbaseline='middle';
context.filltext(i,x1*120,y1*120);
}
context.closepath();
context.restore();
//////////////////////////////////////////////////大刻度
context.save();
context.beginpath();
for(var i=0;i<12;i++){
var x2=math.sin(i*deg);
var y2=-math.cos(i*deg);
context.moveto(x2*148,y2*148);
context.lineto(x2*135,y2*135);
}
context.strokestyle='#fff';
context.linewidth=4;
context.stroke();
context.closepath();
context.restore();
//////////////////////////////////////////////////小刻度
context.save();
var deg1=2*math.pi/60;
context.beginpath();
for(var i=0;i<60;i++){
var x2=math.sin(i*deg1);
var y2=-math.cos(i*deg1);
context.moveto(x2*146,y2*146);
context.lineto(x2*140,y2*140);
}
context.strokestyle='#fff';
context.linewidth=2;
context.stroke();
context.closepath();
context.restore();
///////////////////////////////////////////////////文字
context.save();
context.strokestyle="#fff";
context.font=' 34px sans-serif';
context.textalign='center';
context.textbaseline='middle';
context.stroketext('canvas',0,65);
context.restore();
/////////////////////////////////////////////////new date
var time=new date();
var h=(time.gethours()%12)*2*math.pi/12;
var m=time.getminutes()*2*math.pi/60;
var s=time.getseconds()*2*math.pi/60;
////////////////////////////////////////////////时针
context.save();
context.rotate( h + m/12 + s/720) ;
context.beginpath();
context.moveto(0,6);
context.lineto(0,-85);
context.strokestyle="#fff";
context.linewidth=6;
context.stroke();
context.closepath();
context.restore();
//////////////////////////////////////////////分针
context.save();
context.rotate( m+s/60 ) ;
context.beginpath();
context.moveto(0,8);
context.lineto(0,-105);
context.strokestyle="#fff";
context.linewidth=4;
context.stroke();
context.closepath();
context.restore();
/////////////////////////////////////////////秒针
context.save();
context.rotate( s ) ;
context.beginpath();
context.moveto(0,10);
context.lineto(0,-120);
context.strokestyle="#fff";
context.linewidth=2;
context.stroke();
context.closepath();
context.restore();
context.restore();/////////////////////////////栈出
settimeout(draw, 1000);/////////////////////////////计时器
}
</script>
</body>
</html>
以上就是html5实战-canvas绘制钟表的示例代码分享的详细内容。