先看显示结果：参考：1：Canvas绘图时钟2：canvas动画时钟3：HTML5canvaslineCap属性4：HTML5canvasarc()方法5：Window.requestAnimationFrame()6：window.cancelAnimationFrame()好了，进入正题；参考了以上内容，我们自己来写一个简单的时钟。先掌握重点知识：1：小时是24小时制，所以这里需要把小时改成12小时制hr=hr>=12?小时-12：小时；2：画小时数时的角度问题参考看了这张图：可以看出：x=r*cos(角度)y=r*sin(角度)三角函数知识来一波：sin(a)=BC/AC;余弦(a)=AB/AC；因此得到以下角度代码：varx=Math.cos(rad)*(r/2-40);vary=Math.sin(rad)*(r/2-40);3：将坐标轴逆时针旋转90度，x轴正方向与12点方向对齐ctx.rotate(-Math.PI/2);4：画出时针（小时刻度为：时（12h）+分（60x60min）+秒（3600x12=21600s））ctx.rotate(hr*(Math.PI/6)+(Math.PI/360)*min+(Math.PI/21600)*sec);5：画分针（分针刻度为：分针（60）m+秒（60x60）s）ctx.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);6：requestAnimationFrame(更新动画)具体代码如下(){vartutorial=document.getElementById('tutorial'),tutorialw=tutorial.width,date=newDate(),sec=date.getSeconds(),min=date.getMinutes(),hr=date.getHours();hr=hr>=12?小时-12：小时；if(tutorial.getContext){varctx=tutorial.getContext('2d'),r=tutorialw/2;//画外圈ctx.save();ctx.clearRect(0,0,500,500);ctx.translate(r,r);ctx.lineCap='round';//该属性设置或返回线尾的线帽样式butt:defaultround:向线的每一端添加一个圆形线帽到每一端。square：在线条的每一端添加一个方形线帽。ctx.beginPath();ctx.arc(0,0,140,0,Math.PI*2,真);ctx.moveTo(0,0);ctx.arc(0,0,5,0,Math.PI*2,true);ctx.lineWidth=7;ctx.strokeStyle='#283b28';ctx.closePath();ctx.stroke();//绘制小时数varhours=[3,4,5,6,7,8,9,10,11,12,1,2];for(varhinhours){varrad=2*Math.PI/12*h;varx=Math.cos(rad)*(r/2-40);vary=Math.sin(rad)*(r/2-40);ctx.font="20px格鲁吉亚";ctx.textAlign="居中";ctx.textBaseline="中间";ctx.fillText(小时[h],x,y);}ctx.rotate(-Math.PI/2);//将坐标轴逆时针旋转90度，x轴正方向与12点钟方向对齐//分钟刻度ctx.节省（）;为了（变种我=0;我<60;i++){ctx.beginPath();ctx.rotate(Math.PI/30);//每6deg画一个时钟tickctx.moveTo(110,0);CTX。lineTo(110,0);ctx.lineWidth=5;ctx.strokeStyle='#fba615';ctx.closePath();ctx.stroke();}ctx.restore();//小时刻度ctx.save();for(vari=0;i<12;i++){ctx.beginPath();ctx.rotate(Math.PI/6);//每隔30度绘制一个时钟刻度ctx.moveTo(100,0);ctx.lineTo(120,0);ctx.lineWidth=5;ctx.closePath();ctx.stroke();}ctx.restore();//秒开始ctx.save();ctx.beginPath();ctx.rotate(数学.PI/30*秒）；ctx.moveTo(0,0);ctx.lineTo(45,-5);ctx.lineTo(50,10);ctx.lineTo(80,0);ctx.lineWidth=3;ctx.strokeStyle='#7d9561';ctx.moveTo(90,0);ctx.arc(85,0,5,0,Math.PI*2,真);ctx.strokeStyle='#7d9561';ctx.closePath();ctx.stroke();ctx.restore();//分钟开始ctx.save();ctx.beginPath();ctx.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);ctx.moveTo(0,0);ctx.lineTo(85,0);ctx.lineWidth=8;ctx.strokeStyle='#283b28';ctx.closePath();ctx.stroke();ctx.restore();//小时开始ctx.save();ctx.beginPath();ctx.旋转（hr*(Math.PI/6)+(Math.PI/360)*min+(Math.PI/21600)*sec);ctx.moveTo(0,0);ctx.lineTo(70,0);ctx.lineWidth=8;ctx.strokeStyle='#ff8b17';ctx.closePath();ctx.stroke();ctx.restore();ctx.restore();}window.requestAnimationFrame(draw);}window.requestAnimationFrame(draw);
