HTML 5-Canvasで動く時計を作る

まずcanvasはHTML 5に追加された要素であり、グラフィックを描くのに特化していることを理解します.ページにcanvas要素を配置すると、キャンバスが配置され、グラフィックの描画が可能になります.
canvasに簡単なスタイルを追加

以下は原生JSを用いて実現する

		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()</code></pre> 
  <p><span style="color:#f33b45;">  :           ，     closePath()  。      canvas                    。</span></p> 
  <h2><span style="color:#f33b45;">Hint：</span></h2> 
  <p style="margin-left:0cm;">    ,canvas       arc    ,</p> 
  <table border="1" style="width:568px;"> 
   <tbody> 
    <tr> 
     <td style="background-color:#bfbfbf;border-color:#000000;width:426.1pt;"> <p style="margin-left:0cm;">ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)</p> </td> 
    </tr> 
   </tbody> 
  </table> 
  <p style="margin-left:0cm;">                       6   ，x           ，y             ,radius      ，startAngle     ，endAngle      , anticlockwise             。false     。（      ）。</p> 
  <p style="margin-left:0cm;"> </p> 
  <p style="margin-left:0cm;"> </p> 
  <p>1.       </p> 
  <pre class="has"><code class="language-html">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()</code></pre> 
  <p>2.             </p> 
  <pre class="has"><code class="language-html">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()</code></pre> 
  <p>3.     12    </p> 
  <pre class="has"><code class="language-html">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()</code></pre> 
  <p>4.       ，  ，  ，          </p> 
  <pre class="has"><code class="language-html">//  
		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()