首先我們要清楚canvas是HTML5中新增的一個元素，專門用來繪製圖形。在頁面放置一個canvas元素，就相當於放置了一個畫布，可以在其中進行圖形的繪製。

為canvas新增簡單的樣式

<style>
	body{
		background: black;
	}
	canvas{
		background: #fff;
	}
</style>

<canvas id="canvas" width="400" height="400">
		不支援
</canvas>

下面是使用原生JS實現

<script>
		var oC = document.getElementById("canvas")
		var oGC = oC.getContext("2d") //獲取繪製圖片的"2d"環境
			
		function draw(){
			var oDate = new Date()
        //獲取小時，分鐘，秒
				var oHours = oDate.getHours()
				var oMin = oDate.getMinutes()
				var oSec = oDate.getSeconds()
				
				//獲取刻度所指向的角度
				var oHoursValue = (-90+oHours*30+oMin/2)*Math.PI/180
				var oMinValue = (-90+oMin*6)*Math.PI/180
				var oSecValue = (-90+oSec*6)*Math.PI/180
				
				//獲取60個小刻度
				var x = 200
				var y = 200
				var r = 150
				oGC.save()
				oGC.beginPath()
				for (var i=0;i<60;i++) {
					oGC.moveTo(x,y)
					oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180)
				}
				
				oGC.closePath()
				oGC.stroke()
				oGC.restore()
 

注意:我們使用兩個方法的時候，要注意使用closePath()閉合。因為它會通知canvas當前繪製的圖形已經閉合或者形成了完全封閉。

Hint：

繪製圓形,canvas也為我們提供了arc這個方法,

                   該方法有6個引數，x為繪製圓形的起點橫座標，y表示繪製圓形的起點的縱座標,radius表示圓的半徑，startAngle為開始角度，endAngle為結束的角度, anticlockwise是否按照順時針方向進行繪製。false表示順時針。（預設為順時針）。

1.製作第一個大圓

oGC.save()
		oGC.beginPath()
		oGC.fillStyle = "white"
		oGC.moveTo(x,y)
		oGC.arc(x,y,r*19/20,0,360*Math.PI/180)
		oGC.closePath()
		oGC.fill()
		oGC.restore()

2.製作另一個圓覆蓋第一個大圓

oGC.save()
		oGC.beginPath()
		oGC.fillStyle = "white"
		oGC.moveTo(x,y)
		oGC.arc(x,y,r*18/20,0,360*Math.PI/180)
		oGC.closePath()
		oGC.fill()
		oGC.restore()
 

3.在內圓製作12個大刻度

oGC.save()
	  oGC.beginPath()
	  oGC.lineWidth = 3
	  for (var i=0;i<12;i++) {
			oGC.moveTo(x,y)
			oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180)
	  }
		oGC.closePath()
		oGC.stroke()
		oGC.restore()

4.最後製作出時針，分針，秒針，並新增旋轉的動畫效果

//時針
		oGC.save()       //儲存當前的環境
		oGC.beginPath()
		oGC.moveTo(x,y)
		oGC.strokeStyle = "blue"
		oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue)
		oGC.closePath()
		oGC.stroke()
		oGC.restore()  //還原我們畫小時之前的狀態
//分針
		oGC.save()
		oGC.beginPath()
		oGC.moveTo(x,y)
		oGC.strokeStyle = "green"
		oGC.arc(x,y,r*12/20,oMinValue,oMinValue)
		oGC.closePath()
		oGC.stroke()
		oGC.restore()
//秒針
		oGC.save()
		oGC.beginPath()
		oGC.moveTo(x,y)
		oGC.strokeStyle = "red"
		oGC.arc(x,y,r*16/20,oSecValue,oSecValue)
		oGC.closePath()
		oGC.stroke()
		oGC.restore()				
}

//新增旋轉的動畫效果
setInterval(function(){
	draw()				
	},1000)
						
  draw()
</script>