时钟(canvas方法).docx

时钟var now; /当前时间var ctx;/动画标签var hour;/当前时间的小时值；var minute;/当前时间的分钟值var second;/当前时间的秒值function init()/ 画出时钟clock();/ 让时钟动起来 setInterval(funcName,delay)/funcName:调用的函数名 delay:调用函数的间隔，以毫秒计算。1000毫秒=1秒setInterval(clock,1000);/ 画出时钟function clock()/获取到当前的时间/Date 对象自动使用当前的日期和时间作为其初始值。now = new Date();/获得动画标签 getContext()规定画面上的绘制环境，目前只有2dctx = document.getElementById(canvas).getContext(2d);/获取时钟的小时、分钟、秒的值/now. 获取现在时间(小时、分钟、秒)整数hour = now.getHours();minute = now.getMinutes();second = now.getSeconds();/开始画 save()保存当前图像的状态ctx.save(); /保存之前状态，同时将保存后的状态画笔位置重置initJob();/1、初始化操作drawBorder();/2、画时钟外框hourScale();/3、小时刻度minuteScale();/4、分钟刻度hourNeedle();/5、时针minuteNeedle();/6、分针secondNeedle();/7、秒针ctx.restore();/结束 restore()画完，将画笔状态还原/初始化操作function initJob()/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.PI / 2);/ 画时钟外框function drawBorder()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 = lightcoral;/开始画ctx.stroke(); / 动笔画ctx.restore();/画笔路径重置/ 小时刻度function hourScale()ctx.save();ctx.lineWidth = 7;/ 一天12小时，画十二个刻度for (var i = 0; i 12; i+) ctx.beginPath ();/开始新路径/ 360度 / 12度 = 30度，Math.PI:180弧度ctx.rotate(Math.PI / 6);/ 刻度长度 180-160 = 20/ moveto是移动到某个坐标，lineto是从当前坐标连线到某个坐标ctx.moveTo(180,0); / 画笔结束画的位置ctx.lineTo(160,0); / 画笔开始的位置ctx.stroke(); / 动笔画ctx.restore(); /重置画笔路径/ 分钟刻度function minuteScale()ctx.save();ctx.lineWidth = 4;/ 一小时60分钟for (var i = 0; i 60; i+) / 画分钟刻度，需要隔开小时刻度（5分钟一个小时刻度，跳小时刻度画分钟刻度if(i % 5 != 0)ctx.beginPath();/ moveto是移动到某个坐标，lineto是从当前坐标连线到某个坐标ctx.moveTo(180,0);ctx.lineTo(170,0);ctx.strokeStyle = cyan;ctx.stroke();/ 60个分钟刻度，3600/60=60ctx.rotate(Math.PI / 30);ctx.restore();/ 时针function hourNeedle()ctx.save();ctx.lineWidth = 8;ctx.beginPath();/ hour * (Math.PI / 6):一小时时针转动的角度 360/12/ minute * (Math.PI / 6 / 60):1分钟时钟转动的角度 360/12/60/ second * (Math.PI /6 /60 /3600) : 1秒钟时针转动的角度ctx.rotate(hour * (Math.PI / 6) + minute * (Math.PI / 6 / 60) );/ 时针长度 100ctx.moveTo(-15,0);ctx.lineTo(85,0);ctx.stroke(); /动笔画ctx.restore(); /重置画笔路径/ 分针function minuteNeedle()ctx.save();ctx.lineWidth = 6;ctx.beginPath();ctx.rotate(minute * (Math.PI / 30) );ctx.moveTo(-15,0);ctx.lineTo(110,0);ctx.stroke();ctx.restore();function secondNeedle()ctx.save();ctx.lineWidth = 3;ctx.beginPath();/ 1分钟60秒（秒