JS+Canvas绘制时钟效果_

《JS+Canvas绘制时钟效果_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、JS+Canvas绘制时钟效果_这篇文章主要为大家具体介绍了基于javascript下用法canvas绘制时钟的具体实现代码，具有肯定的参考价值，感爱好的小伙伴们可以参考一下本文实例为大家分享了用法canvas绘制时钟的具体代码，供大家参考，具体内容如下代码如下:1.clock.html!doctypehtmlhtmllang="en"headmetacharset="UTF-8"metaname="Description"content=""titlecanvas时钟/title/headbodycanvasid="canvas"width="300"

2、height="300"/canvasscriptvarcanvas=document.getElementById("canvas");varcontext=canvas.getContext('2d');//draw();functiondraw(){//得到当前系统的时分秒varnow=newDate();varsec=now.getSeconds();varmin=now.getMinutes();varhour=now.getHours();hour=12(hour=hour-12);varradius=Math.min(canvas.widt

3、h/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.lin

4、eCap="round";context.beginPath();for(vari=0;i12;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(vari=0;i60;i++){if(!i%5==0){context.moveTo(r

5、adius-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*

6、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.re

7、store();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.strokeSt

8、yle="gray";context.beginPath();context.a