context是一個封裝了很多繪圖功能的對象。不支持低版本的IE。

<canvas  width="500" height="500" id="clock" ></canvas>

思路是獲取到時分秒渲染到頁面

1             var now =new Date();
2             var second =now.getSeconds();
3             var minute =now.getMinutes();
4             var hour1 =now.getHours();
5             //將24小時進制轉為12小時，且為浮點型
 

6             var hour=hour1+minute/60;
7             hour=hour>12 ?hour-12:hour;
8             //獲取全部時間
9             var time=now.toLocaleString( );        

創建畫布路徑

1                  //開始新路徑
2                 cxt.beginPath();
3                 cxt.lineWidth=8;
4                 cxt.strokeStyle="blue";
 
5                 //路徑函數 x,y,r,角度範圍,順時針/逆時針
6                 cxt.arc(250,250,200,0,360,false);
7                 cxt.stroke(); 
8                 cxt.closePath();        

畫布的時間刻度

  1                 //時刻度
  2                 for(var i=0;i<12;i++){
  3                     //保存當前狀態
  4                     cxt.save();
 
  5                     //刻度粗細
  6                      cxt.lineWidth=5;
  7                     //刻度顏色
  8                     cxt.strokeStyle="black"
  9                     //設置00點,以畫布中心為00
 10                     cxt.translate(250,250);
 11                     //設置旋轉角度 參數是弧度，角度 0--360 弧度角度*Math.PI/180
 12                     cxt.rotate(i*30*Math.PI/180);
 13                     cxt.beginPath();
 14                     //刻度起始點
 15                     cxt.moveTo(0,-180);
 16                     //刻度結束點
 17                     cxt.lineTo(0,-195);
 18                     cxt.closePath();
 19                     cxt.stroke();
 20                     //將旋轉後的圖片返回原畫布
 21                     cxt.restore();
 22                 }
 23 
 24                //分刻度
 25                  for(var i=0;i<60;i++){
 26                     //保存當前狀態
 27                     cxt.save();
 28                     //刻度粗細
 29                     cxt.lineWidth=3;
 30                     //刻度顏色
 31                     cxt.strokeStyle="black"
 32                     //設置00點,以畫布中心為00
 33                     cxt.translate(250,250);
 34                     //設置旋轉角度 參數是弧度，角度 0--360 弧度角度*Math.PI/180
 35                     cxt.rotate(i*6*Math.PI/180);
 36                     cxt.beginPath();
 37                     //起始點
 38                     cxt.moveTo(0,-188);
 39                     cxt.lineTo(0,-195);
 40                     cxt.closePath();
 41                     cxt.stroke();
 42                     //將旋轉後的圖片返回原畫布
 43                     cxt.restore();
 44                 }
 45             //表盤中心
 46                 cxt.beginPath();
 47                 cxt.lineWidth=1;
 48                 cxt.strokeStyle="red";
 49                 cxt.fillStyle="red";
 50                 //路徑函數 x,y,r,角度範圍,順時針/逆時針
 51                 cxt.arc(250,250,4,0,360,false);
 52                 cxt.fill();
 53                 cxt.stroke(); 
 54                 cxt.closePath();
 55             //時針
 56                 //保存當前狀態
 57                  cxt.save();
 58                  cxt.lineWidth=5;
 59                  cxt.strokeStyle="black";
 60                  //設置異次元空間00點
 61                  cxt.translate(250,250);
 62                  //設置旋轉角度 參數是弧度，角度 0--360 弧度角度*Math.PI/180
 63                  cxt.rotate(hour*30*Math.PI/180);
 64                  cxt.beginPath();     
 65                  cxt.moveTo(0,-120);
 66                  cxt.lineTo(0,10);
 67                  cxt.closePath();
 68                  cxt.stroke();
 69                  cxt.restore();
 70             //分針
 71                  cxt.save();
 72                  cxt.lineWidth="3";
 73                  cxt.strokeStyle="black";
 74                  cxt.translate(250,250);
 75                  cxt.rotate(minute*6*Math.PI/180);
 76                  cxt.beginPath();     
 77                  cxt.moveTo(0,-150);
 78                  cxt.lineTo(0,15);
 79                  cxt.closePath();
 80                  cxt.stroke();
 81                  cxt.restore();
 82             //秒針
 83                  cxt.save();
 84                  cxt.lineWidth="1.5";
 85                  cxt.strokeStyle="red";
 86                  cxt.translate(250,250);
 87                  cxt.rotate(second*6*Math.PI/180);
 88                  cxt.beginPath();     
 89                  cxt.moveTo(0,-160);
 90                  cxt.lineTo(0,20);
 91                  cxt.closePath();
 92                  cxt.stroke();
 93                  //秒針前端小點
 94                  cxt.beginPath();
 95                  //外環為紅色
 96                  cxt.strokeStyle="red";
 97                  //灰色填充
 98                  cxt.fillStyle="gray";
 99                  cxt.arc(0,-145,4,0,360,false);
100                    cxt.fill();
101                  cxt.closePath();
102                  cxt.stroke();
103                  cxt.restore();
104             //表盤中心
105                 cxt.beginPath();
106                 cxt.lineWidth=1;
107                 //外環為紅色
108                 cxt.strokeStyle="red";
109                 //灰色填充
110                 cxt.fillStyle="gray";
111                 //路徑函數 x,y,r,角度範圍,順時針/逆時針
112                 cxt.arc(250,250,4,0,360,false);
113                 cxt.fill();
114                 cxt.stroke(); 
115                 cxt.closePath();
116             //寫時間    
117                 cxt.font="15px 黑體 ";
118                  cxt.fillStyle="black";
119                 //實心字
120                 cxt.fillText(time,160,150);

因為每次都會更新新的時間，需要清除畫布

cxt.clearRect(0,0,500,500);

創建一個函數 定時器讓畫布每秒動一次

setInterval(drawClock,1000);

利用canvas畫布畫出一個鐘表