时钟(canvas方法)

《时钟(canvas方法)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、

2、ripttype="text/javascript">varnow;//当前时间varctx;//动画标签varhour;//当前时间的小时值；varminute;//当前时间的分钟值varsecond;//当前时间的秒值functioninit(){//画出时钟clock();//让时钟动起来setInterval(funcName,delay)//funcName:调用的函数名delay:调用函数的间隔，以毫秒计算。1000毫秒=1秒setInterval(clock,1000);}//画出时钟funct

3、ionclock(){//获取到当前的时间//Date对象自动使用当前的日期和时间作为其初始值。now=newDate();//获得动画标签getContext()规定画面上的绘制环境，目前只有2dctx=document.getElementById("canvas").getContext("2d");////获取时钟的小时、分钟、秒的值//now.获取现在时间(小时、分钟、秒)整数hour=now.getHours();minute=now.getMinutes();second=now.getSeco

4、nds();//开始画save()保存当前图像的状态ctx.save();//保存之前状态，同时将保存后的状态画笔位置重置initJob();//1、初始化操作drawBorder();//2、画时钟外框hourScale();//3、小时刻度minuteScale();//4、分钟刻度hourNeedle();//5、时针minuteNeedle();//6、分针secondNeedle();//7、秒针ctx.restore();//结束restore()画完，将画笔状态还原}//初始化操作functio

5、ninitJob(){//clearRect()方法删除一个画布的矩形区域。ctx.clearRect(0,0,600,600);//这里主要为了删除指针区域ctx.translate(300,300);//指针偏移位置，默认从0，0处开始ctx.scale(0.7,0.7);//缩放比例ctx.lineCap="round";//刻度样式round圆butt平直square正方形//canvas中rotate()中的角度是用弧度指定的//指针初始位置指在12点PI:180度ctx.rotate(-Math.

6、PI/2);}//画时钟外框functiondrawBorder(){ctx.save();//beginPath()丢弃任何当前定义的路径并且开始一条新的路径ctx.beginPath();//开始新路径ctx.lineWidth=15;//画笔宽度，即时钟外框的宽度//画圆0，0中心点坐标(画笔偏移过后的位置就是中心点)200半径Math.PI*2结束角度true逆时针(false顺时针)ctx.arc(0,0,200,0,Math.PI*2,true);//画笔颜色ctx.strokeStyle="li

7、ghtcoral";//开始画ctx.stroke();//动笔画ctx.restore();//画笔路径重置}//小时刻度functionhourScale(){ctx.save();ctx.lineWidth=7;//一天12小时，画十二个刻度for(vari=0;i<12;i++){ctx.beginPath();//开始新路径//360度/12度=30度，Math.PI:180弧度ctx.rotate(Math.PI/6);//刻度长度180-160=20//moveto是移动到某个坐标，lineto

8、是从当前坐标连线到某个坐标ctx.moveTo(180,0);//画笔结束画的位置ctx.lineTo(160,0);//画笔开始的位置ctx.stroke();//动笔画}ctx.restore();//重置画笔路径}//分钟刻度functionminuteScale(){ctx.save();ctx.lineWidth=4;//一小时60分钟for(vari=0;i<60;i++){//画分钟刻