看到的一个html5写的时钟
<!doctype> <html> <head> <script> window.onload=function(){ var canvas=document.getElementById("myCanvas"); var c=canvas.getContext("2d");//getContenText 返回一个绘图的环境，其中2d是目前唯一合法的字符 指的是 var drawClock=function(){ c.clearRect(0,0,500,500);//清除画布, var now =new Date(); var sec=now.getSeconds(); var min=now.getMinutes(); var hour=now.getHours(); hour=hour+min/60; hour=hour>12?hour-12:hour;//21:36:21 把24小时转12小时制 //表盘 c.lineWidth=10; c.strokeStyle="blue"; c.beginPath(); c.arc(250,250,200,0,360,false); c.closePath(); c.stroke(); //1.刻度 //1.1 时刻度 c.lineWidth=7; c.strokeStyle="#000"; for(var i=0;i<12;i++){ c.save(); c.translate(250,250); c.rotate(i*30*Math.PI/180); c.beginPath(); c.moveTo(0,-170); c.lineTo(0,-190); c.closePath(); c.stroke(); c.restore(); } //1.2 分刻度 c.lineWidth=5; c.strokeStyle="#000"; for(var i=0;i<60;i++){ c.save(); c.translate(250,250); c.rotate(i*6*Math.PI/180); c.beginPath(); c.moveTo(0,-170); c.lineTo(0,-180); c.closePath(); c.stroke(); c.restore(); } //2.1 时针 c.save(); c.lineWidth=7; c.strokeStyle="#000"; c.translate(250,250); c.rotate(hour*30*Math.PI/180); c.beginPath(); c.moveTo(0,-100); c.lineTo(0,10); c.closePath(); c.stroke(); c.restore(); //2.2 分针 c.save(); c.lineWidth=5; c.strokeStyle="#333"; c.translate(250,250); c.rotate( min*6*Math.PI/180); c.beginPath(); c.moveTo(0,-140); c.lineTo(0,15); c.closePath(); c.stroke(); c.restore(); //2.3 秒针 c.save(); c.lineWidth=2; c.strokeStyle="red"; c.translate(250,250); c.rotate(sec * 6 *Math.PI/180); c.beginPath(); c.moveTo(0,-160); c.lineTo(0,20); c.closePath(); c.stroke(); //圆心加个圆圈 c.beginPath(); c.arc(0,0,5,0,360,false); c.closePath(); c.fillStyle="green"; c.fill(); //在秒针前端加个圆点 c.beginPath(); c.arc(0,-140,10,0,360,false); c.closePath(); c.fillStyle="red"; c.fill(); c.restore(); //3 盘外时刻数字 for(var i=1;i<13;i++){ c.save(); c.lineWidth=5; c.strokeStyle="blue"; c.font="40px 黑体"; c.translate(250,250); c.rotate(i*30*Math.PI/180); c.beginPath(); c.strokeText(""+i,-20,-210); c.closePath(); c.stroke(); c.restore(); } } drawClock(); setInterval(drawClock,1000); } </script> </head> <body> <canvas width="500" height="500" id="myCanvas" style="background-color:yellow"> 垃圾浏览器不支持canvas标签 </canvas> </body> </html>
效果图
