首页 > 代码库 > html5写的一个时钟
html5写的一个时钟
看到的一个htm
l5写的时钟
<!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>
效果图
html5写的一个时钟
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。