試着用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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用HTML5的canvas做一個時鍾 Html5繪制時鍾用HTML5制作的一個簡單的動畫效果 html5入門：教你用canvas寫一個時鍾 #Python制作一個時鍾 HTML5 Canvas 繪制時鍾 HTML5 canvas 指針時鍾 html5制作表格用Phaser來制作一個html5游戲——flappy bird （二）關於一個簡易的Html5音樂播放器的制作