最近一直在學習html5，學到了html5的canvas標籤，這個畫布真的是很強大，它有對應的javascript的api的支援，你可以在這個標籤裡面繪製任意的圖形，你也可以把圖片放在裡面，能夠做出很炫的效果。

言歸正傳，廢話不多說，首先，html，只一句設定畫布的id，寬度和高度

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

下面就javascript，不多說什麼了，都是基本的語法，很容易明白的，裡面的主要地方也有解釋：

注：

1.stroke()方法繪製當前路徑的邊框。路徑定義的幾何線條產生了，但線條的視覺化取決於 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等屬性。

2.save() 方法把當前狀態的一份拷貝壓入到一個儲存影象狀態的棧中。這就允許您臨時地改變影象狀態，然後，通過呼叫 restore() 來恢復以前的值

3.translate() 方法為畫布的變換矩陣新增水平的和垂直的偏移。引數 dx 和 dy 新增給後續定義路徑中的所有點。

4.scale() 方法為畫布的當前變換矩陣新增一個縮放變換。縮放通過獨立的水平和垂直縮放因子來完成。例如，傳遞一個值 2.0 和 0.5 將會導致繪圖路徑寬度變為原來的兩倍，而高度變為原來的 1/2。指定一個負的 sx 值，會導致 X 座標沿 Y 軸對摺，而指定一個負的 sy 會導致 Y 座標沿著 X 軸對摺。

5.rotate() 方法通過指定一個角度，改變了畫布座標和 Web 瀏覽器中的 元素的畫素之間的對映，使得任意後續繪圖在畫布中都顯示為旋轉的。它並沒有旋轉 元素本身。注意，這個角度是用弧度指定的。

window.onload=function(){
      clock();
      setInterval(clock,1000);///每一秒鐘重新繪製一次
    };
    function clock(){
      ///得到時分秒
      var now=new Date();
      var sec=now.getSeconds(),min=now.getMinutes(),hour=now.getHours();
      hour=hour>=12?hour-12:hour;
      var c=document.getElementById("myCanvas"
 
).getContext("2d");

      c.save();
      c.clearRect(0,0,150,150);    ///初始化畫布
      c.translate(75,75);        
      c.scale(0.4,0.4);
      c.rotate(-Math.PI/2);

      c.strokeStyle="black";
      c.fillStyle="black";
      c.lineWidth=8;
      c.lineCap="round";

      c.save();
      c.beginPath();
      for(var i=0;i<12;i++){///小時刻度
        c.rotate(Math.PI/6);
        c.moveTo(100,0);
        c.lineTo(120,0);
      }
      c.stroke();
      c.restore();
      c.save();

      c.lineWidth=5;
      c.beginPath();
      for(var i=0;i<60;i++){///分鐘刻度
        if(i%5!=0){
          c.moveTo(117,0);
          c.lineTo(120,0);
        }
        c.rotate(Math.PI/30);
      }
      c.stroke();
      c.restore();
      c.save();

      c.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);///畫上時針
      c.lineWidth=14;
      c.beginPath();
      c.moveTo(-20,0);
      c.lineTo(75,0);
      c.stroke();
      c.restore();
      c.save();

      c.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);///分針
      c.strokeStyle="#29A8DE";
      c.lineWith=10;
      c.beginPath();
      c.moveTo(-28,0);
      c.lineTo(102,0);
      c.stroke();
      c.restore();
      c.save();

      c.rotate(sec*Math.PI/30);///秒針
      c.strokeStyle="#D40000";
      c.lineWidth=6;
      c.beginPath();
      c.moveTo(-30,0);
      c.lineTo(83,0);
      c.stroke();
      c.restore();
      c.save();
      ///表框      
      c.lineWidth=14;
      c.strokeStyle="#325FA2";
      c.beginPath();
      c.arc(0,0,142,0,Math.PI*2,true);
      c.stroke();
      c.restore();
      c.restore();
    }

最後截張圖看看效果：