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
