首页 > 代码库 > html5制作一个时钟
html5制作一个时钟
试着用html5写一个时钟
记得开始这个随笔是几天前，一直保存在草稿里面，一直感觉有个东西搁在在那里，所以今天熬夜也要写完这篇博客！！！哈哈...不多说来上代码和思路。
---------------------------------------------------------------------------------------------
其实并不难，主要看你是否掌握了canvas下面几个属性:save(),restore();ratate();translate(),moveTo(),lineTo();beginPath();requestAnimationFrame()；在开始看下面的代码的时候最好先弄清楚这些方法的原理和作用，另外canvas有个重要特性:canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法.
好了，开始代码，先开始画12个小时和60分钟的线条(一些需要步骤在代码有注释):
1 function rotateFun(){ 2 var now= new Date();//获取当前时间对象，对以后指针旋转很重要 3 4 var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境 5 6 ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示 7 8 ctx.save();//第一个保存状态 9 ctx.fillStyle=‘rgba(20,20,20,0.2)‘;10 ctx.fillRect(0,0,800,600);11 ctx.translate(400,300);//平移画布中心到中心 12 13 //画12个小时14 ctx.save();15 for (var i = 0; i < 12; i++) {16 ctx.strokeStyle=‘black‘;17 ctx.rotate(2*Math.PI/12);18 ctx.moveTo(120,0);19 ctx.lineTo(100,0);20 ctx.lineWidth=8;21 ctx.stroke();22 }23 ctx.restore(); 24 25 //画60个分钟26 ctx.save();27 for (var i = 0; i <60 ;i++) {28 ctx.strokeStyle=‘black‘;29 ctx.rotate(2*Math.PI/60);30 ctx.moveTo(115,0);31 ctx.lineTo(105,0);32 ctx.lineWidth=2;33 ctx.stroke();34 }35 ctx.restore();36 37 ctx.restore()38 39 }
-----------------------------------------------------------------------
静态完了就是动态的，指针随着时间而走动.这里指针走的原理是：每一帧调用后都是重新画的一个画布，里面的指针，12个小时和60分钟的线条都是新的，只是下一秒后就物是人非，整个画布就转了某个角度，但是指针相对画布还是静止没有变过的，所以我们的眼睛就会产生了指针随着时间走的效果，另外就是指针指在当前时间都是参数控制的，代买如下:
var hour=now.getHours(); var min=now.getMinutes(); var sec=now.getSeconds(); //画秒针 ctx.save(); ctx.beginPath(); ctx.rotate(sec*Math.PI/30); ctx.strokeStyle=‘black‘; ctx.lineWidth=4; ctx.moveTo(0,30); ctx.lineTo(0,-112); ctx.stroke(); ctx.closePath(); ctx.restore(); //画分钟 ctx.save(); ctx.beginPath(); ctx.rotate(min*Math.PI/30+sec*Math.PI/1800); ctx.strokeStyle=‘black‘; ctx.lineWidth=6; ctx.moveTo(0,28); ctx.lineTo(0,-83); ctx.stroke(); ctx.closePath(); ctx.restore(); //画时钟 ctx.save(); ctx.beginPath(); ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600); ctx.strokeStyle=‘black‘; ctx.lineWidth=8; ctx.moveTo(0,26); ctx.lineTo(0,-63); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle=‘blue‘; ctx.arc(0,0,126,0,2*Math.PI); ctx.stroke(); ctx.closePath(); ctx.restore(); ctx.restore();
------------------------------------------------------------
好了，知道了这些原理：给出完整的代码,这些代码还有优化改进的地方：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>rotate</title> 6 </head> 7 <body> 8 <canvas id=‘canvas‘ width="800" height="600"></canvas> 9 <script> 10 function rotateFun(){11 var now= new Date();//获取当前时间对象，对以后指针旋转很重要12 13 var ctx=document.getElementById("canvas").getContext("2d");//取的画布环境14 15 ctx.clearRect(0,0,800,600);//在开始之前都要清空画布，因为不清空就会所有的痕迹在画布上显示16 17 ctx.save();//第一个保存状态18 ctx.fillStyle=‘rgba(20,20,20,0.2)‘;19 ctx.fillRect(0,0,800,600);20 ctx.translate(400,300);//平移画布中心到中心 21 22 //画12个小时23 ctx.save();24 for (var i = 0; i < 12; i++) {25 ctx.strokeStyle=‘black‘;26 ctx.rotate(2*Math.PI/12);27 ctx.moveTo(120,0);28 ctx.lineTo(100,0);29 ctx.lineWidth=8;30 ctx.stroke();31 }32 ctx.restore(); 33 34 //画60个分钟35 ctx.save();36 for (var i = 0; i <60 ;i++) {37 ctx.strokeStyle=‘black‘;38 ctx.rotate(2*Math.PI/60);39 ctx.moveTo(115,0);40 ctx.lineTo(105,0);41 ctx.lineWidth=2;42 ctx.stroke();43 }44 ctx.restore();45 46 var hour=now.getHours();47 var min=now.getMinutes();48 var sec=now.getSeconds();49 50 //画秒针51 ctx.save();52 ctx.beginPath();53 ctx.rotate(sec*Math.PI/30);54 ctx.strokeStyle=‘black‘;55 ctx.lineWidth=4;56 ctx.moveTo(0,30);57 ctx.lineTo(0,-112);58 ctx.stroke();59 ctx.closePath();60 ctx.restore();61 62 //画分钟63 ctx.save();64 ctx.beginPath();65 ctx.rotate(min*Math.PI/30+sec*Math.PI/1800);66 ctx.strokeStyle=‘black‘;67 ctx.lineWidth=6;68 ctx.moveTo(0,28);69 ctx.lineTo(0,-83);70 ctx.stroke();71 ctx.closePath();72 ctx.restore();73 74 //画时钟75 ctx.save();76 ctx.beginPath();77 ctx.rotate(hour*Math.PI/6+min*Math.PI/360+sec*Math.PI/21600);78 ctx.strokeStyle=‘black‘;79 ctx.lineWidth=8;80 ctx.moveTo(0,26);81 ctx.lineTo(0,-63);82 ctx.stroke();83 ctx.closePath();84 ctx.beginPath();85 ctx.strokeStyle=‘blue‘;86 ctx.arc(0,0,126,0,2*Math.PI);87 ctx.stroke();88 ctx.closePath();89 ctx.restore();90 ctx.restore();91 92 window.requestAnimationFrame(rotateFun);93 }94 95 rotateFun();96 </script>97 </body>98 </html>
00:45:50
html5制作一个时钟
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。