H5 canvas圓形的時鍾

   今天用H5中的canvas標簽做一個時鍾，H5中有很多好用的新增標簽，真的很不錯。

   1.canvas標簽介紹

           <canvas> 標簽定義圖形，比如圖表和其他圖像，你必須使用腳本來繪制圖形。在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。

                

          HTML5 <canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成.不過不是所有的瀏覽器都支持這個標簽的，支持的有谷歌4.0，ie9.0，火狐2.0等。

---

 

   2.時鍾的繪制第一步

        在html中添加以下代碼，一個寬高都是100的畫布。

<canvas id="myCanvas" width="100" height="100"></canvas>

 

---

 

 3.用js開始繪制鍾表

<script type="text/javascript">
     var myCanvas = document.getElementById('myCanvas');
     var c = myCanvas.getContext('2d');
     function clock(){
         c.clearRect(0,0,100,100);
         var data = new Date();
         var sec =data.getSeconds();
         var min =data.getMinutes();
         var hour=data.getHours();

         c.save();
         c.translate(50,50);
         c.rotate(-Math.PI/2);
         //分鍾刻度線
         for(var i=0;i<60;i++){    //畫12個刻度線
             c.beginPath();
             c.strokeStyle = "#f00";
             c.lineWidth = 1 ;
             c.moveTo(45,0);
             c.lineTo(40,0);
             c.stroke();
             c.rotate(Math.PI/30); //每個6deg畫一個時鍾刻度線
             c.closePath();
         }
         //時鍾刻度線
         for(var i=0;i<12;i++){    //畫12個刻度線
             c.beginPath();
             c.strokeStyle = "#000";
             c.lineWidth = 2 ;
             c.moveTo(45,0);
             c.lineTo(40,0);
             c.stroke();
             c.rotate(Math.PI/6); //每個30deg畫一個時鍾刻度線
             c.closePath();
         }
         //外表盤
         c.beginPath();
         c.strokeStyle = "pink";
         c.arc(0,0,55,0,Math.PI*2);
         c.lineWidth = 16 ;
         c.stroke();
         c.closePath();

         //畫時針
         hour = hour>12?hour-12:hour;
//                console.log(hour);
         c.beginPath();
         c.save();
         c.rotate(Math.PI/6*hour+Math.PI/6*min/60+Math.PI/6*sec/3600);
         c.strokeStyle = "yellowgreen";
         c.lineWidth = 4 ;
         c.moveTo(-25,0);
         c.lineTo(40,0);
         c.stroke();
         c.restore();
         c.closePath();


         //畫分針
//                console.log(min);
         c.beginPath();
         c.save();
         c.rotate(Math.PI/30*min+Math.PI/30*sec/60);
         c.strokeStyle = "springgreen";
         c.lineWidth = 3 ;
         c.moveTo(-15,0);
         c.lineTo(40,0);
         c.stroke();
         c.restore();
         c.closePath();


         //畫秒針
         c.beginPath();
         c.save();
         c.rotate(Math.PI/30*sec);
         c.strokeStyle = "red";
         c.lineWidth = 2 ;
         c.moveTo(-20,0);
         c.lineTo(40,0);
         c.stroke();
         c.restore();
         c.closePath();

         c.restore();
     }
     clock();
     setInterval(clock,100);
 </script>

   

---

 

   4.得到下圖的效果

         

         時鍾已經畫完了，關於形狀和顏色可以自己再修改的。這個標簽的很多使用方法我就不一一的說了，下面這個地址，大家可以查看的                  　　　http://www.runoob.com/html/html5-canvas.html