1 <!doctype html> 2 <meta charset="UTF-8"> 3 <html> 4 <header></header> 5 <body> 6 7 <!--canvas标签画圆--> 8 <canvas id="canvas" width="500" height="500"> 9 您的浏览器不支持canvas标签，无法看到时钟 10 </canvas> 11 <script> 12 13 function drawClock(){ 14 15 //获取画布 16 var canvas=document.getElementById('canvas'); 17 //创建context 对象 18 var cxt=canvas.getContext("2d"); 19 //清除画布 20 cxt.clearRect(0,0,500,500); 21 var now =new Date(); 22 var sec=now.getSeconds(); 23 var min=now.getMinutes(); 24 var hour=now.getHours(); 25 //小时必须获取浮点类型(小时+分数转化成的小时) 26 hour=hour+min/60; 27 //问题 19:23:30 28 //将24小时进制转换为12小时 29 hour=hour>12?hour-12:hour; 30 //刻度盘 31 //设置画线的宽度 32 cxt.lineWidth=10; 33 //设置笔触的颜色 34 cxt.strokeStyle="blue"; 35 //开始路径 36 cxt.beginPath(); 37 //arc(x轴,y轴,半径,开始的度数,结束度数,是否顺时针); 38 cxt.arc(250,250,200,0,180,false); 39 //进行绘制 40 cxt.stroke(); 41 //结束路径 42 cxt.closePath(); 43 //时刻度 44 for(var i=0;i<12;i++){ 45 //需要在异次元空间所有要保存画布 46 cxt.save(); 47 //设置是真时针的宽度 48 cxt.lineWidth=7; 49 //设置时针的颜色 50 cxt.strokeStyle="#000"; 51 //先设置0，0点 52 cxt.translate(250,250); 53 //在设置旋转的角度（弧度=角度*π/180） 54 cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度，时针的间隔是30度 55 //开始路径 56 cxt.beginPath(); 57 //时针移动点 58 cxt.moveTo(0,-170); 59 //时针移动到 60 cxt.lineTo(0,-190); 61 //时针停止移动 62 cxt.closePath(); 63 cxt.stroke(); 64 cxt.restore(); 65 66 67 } 68 //秒刻度 69 for(var i=0;i<60;i++){ 70 //需要在异次元空间所有要保存画布 71 cxt.save(); 72 //设置是真时针的宽度 73 cxt.lineWidth=4; 74 //设置时针的颜色 75 cxt.strokeStyle="#000"; 76 //先设置0，0点 77 cxt.translate(250,250); 78 //在设置旋转的角度（弧度=角度*π/180） 79 cxt.rotate(i*6*Math.PI/180);//角度*Math.PI/180=弧度秒针的间隔是6度 80 //开始路径 81 cxt.beginPath(); 82 //时针移动点 83 cxt.moveTo(0,-180); 84 //时针移动到 85 cxt.lineTo(0,-190); 86 //时针停止移动 87 cxt.closePath(); 88 cxt.stroke(); 89 cxt.restore(); 90 91 } 92 //时针 93 94 //需要在异次元空间保存所有画布 95 cxt.save(); 96 //设置时针的宽度 97 cxt.lineWidth=10; 98 //设置时针的颜色 99 cxt.strokeStyle="#000"; 100 //先设置0，0点 101 cxt.translate(250,250); 102 //设置选择弧度 103 cxt.rotate(hour*30*Math.PI/180);//角度*Math.PI/180=弧度秒针的间隔是6度 104 //开始路径 105 cxt.beginPath(); 106 //时针移动点 107 cxt.moveTo(0,0); 108 //时针移动到 109 cxt.lineTo(0,-150); 110 //时针停止移动 111 cxt.closePath(); 112 cxt.stroke(); 113 cxt.restore(); 114 115 //分针 116 117 //需要在异次元空间保存所有画布 118 cxt.save(); 119 //设置分针的宽度 120 cxt.lineWidth=5; 121 //设置分针的颜色 122 cxt.strokeStyle="#000"; 123 //先设置0，0点 124 cxt.translate(250,250); 125 //设置旋转弧度 126 cxt.rotate(min*30*Math.PI/180);//角度*Math.PI/180=弧度分针的间隔是6度 127 //开始路径 128 cxt.beginPath(); 129 //时针移动点 130 cxt.moveTo(0,-150); 131 //时针移动到 132 cxt.lineTo(0,10); 133 //时针停止移动 134 cxt.closePath(); 135 cxt.stroke(); 136 cxt.restore(); 137 //秒针 138 //需要在异次元空间中所有需要保存画布 139 cxt.save(); 140 //设置分针的宽度 141 cxt.lineWidth=4; 142 //设置秒针的颜色 143 cxt.stroeStyle="red"; 144 //先设置00点 145 cxt.translate(250,250); 146 //设置旋转角度角度的公式为角度*Math.PI/180 147 cxt.rotate(sec*6*Math.PI/180); 148 //时针开始移动 149 cxt.beginPath(); 150 cxt.moveTo(0,-150); 151 cxt.lineTo(0,10); 152 //时针停止移动 153 cxt.closePath(); 154 cxt.stroke(); 155 //回到上一个状态,即 ctx.fillStyle="white"; 156 cxt.restore(); 157 158 //使用setInterval(代码,毫秒时间) 让时钟动起来 159 } 160 drawClock(); 161 setInterval(drawClock,1000); 162 163 </script> 164 165 </body> 166 </html>
效果图：