时钟(canvas方法).docx

!DOCTYPE htmlhtmlheadmeta charset=UTF-8meta name=viewport content=initial-scale=1.0, maximum-scale=1.0, user-scalable=no /title时钟/title/head!-- 在页面或图像加载完成后发生 --body onload=init()canvas width=600 height=600 id=canvas/canvas/bodyscript type=text/javascriptvar 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.sa