这篇文章主要介绍了使用画布替代超炫时钟的方法及代码，非常的漂亮，这里推荐给大家
先上效果图：
复制代码
代码如下：
<！DOCTYPEhtml><html><head><metacharset=“utf-8”><title>画布钟表</title><metaname=“Keywords”content=“”><metaname=“author”content=“@my_programmer”><styletype=“text/css”>body{margin：0;}</style></head><bodyonload=“run（）”><canvasid=“canvas”width=400height=400style=“border：1px#cccsolid;”>如果你看到这段文字，说明你的浏览器弱爆了！</canvas><script>window.onload=draw;函数draw（）{varcanvas=document.getElementById（'canvas'）;varcontext=canvas.getContext（'2d'）;context.save（）;////////////////////////////////保存context.translate（200,200）;vardeg=2*Math.PI/12;
/////////////////////////////////////////////////////表盘context.save（）;context.beginPath（）;for（vari=0;i<13;i++）{varx=Math.sin（i*deg）;vary=-Math.cos（i*deg）;context.lineTo（x*150，y*150）;}varc=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（vari=1;i<13;i++）{varx1=Math.sin（i*deg）;vary1=-Math.cos（i*deg）;context.fillStyle=“＃fff”;
context.font=“bold20pxCalibri”;context.textAlign='center';context.textBaseline='中间';context.fillText（i，x1*120，y1*120）;}context.closePath（）;context.restore（）;////////////////////////////////////////////////////大刻度context.save（）;context.beginPath（）;for（vari=0;i<12;i++）{varx2=Math.sin（i*deg）;vary2=-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（）;vardeg1=2*Math.PI/60;context.beginPath（）;for（vari=0;i<60;i++）{varx2=Math.sin（i*deg1）;vary2=-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='34pxsans-serif';context.textAlign='center';context.textBaseline='中间';context.strokeText（'canvas'，0,65）;context.restore（）;
/////////////////////////////////////////////////新Datevartime=newDate（）;varh=（time.getHours（）％12）*2*Math.PI/12;varm=time.getMinutes（）*2*Math.PI/60;vars=time.getSeconds（）*2*Math.PI/60;</p><p>/////////////////////////////////////////////时针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）;////////////////////////////计时器</p><p>}</p><p></script></body></html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60973.shtml
