meta charset="UTF-8">
< Canvas width ="500px" height="500px">
<script><br> var can =document.getElementsByTagName("canvas")[0];<br> var x=can.getContext("2d") ;</p>
<p> x.beginPath();<br> x.fillStyle ;<br> x.arc(250,250,250, Math.PI*0/180,Math.PI*360/180);<br> 上の青で塗りつぶした円より小さい半径で円を塗りつぶすと青いリングが現れます <br> x.beginPath();</p> x.fillStyle= "#ffffff";<p> 0/180,Math.PI*360/180);<br> x.fill();</p> 間隔は<p> for(var i=0;i<60;i++){<br/> 250,250 );<br/> x.lineTo(0,230); <br/> x.blood();<br/> ということで、 360 /12 それぞれの間隔は30° もちろん、さらにループすることもできます。スケールを数値に変更します<br/> for(var a=0;a<12;a++){</p> x.save( );<p> x.beginPath();<br/> x.moveTo(0,215);<br/> .lineTo(0,230);<br/> x.ストローク();<br/> x.closePath();<br/> それぞれ時、分、秒を取得します、時と分は小数点まで正確である必要があります</p><p> var time=new Date();<br/> var Seconds=time.getSeconds( );<br/> var minutes=time.getMinutes()+秒/60;<br/> var hours=time.getHours()+ minutes/60;<br/><br/> //12時を超えると13時に入ります。は 1 時なので、12 を引く必要があります<br/> if(hours>12){<br/> hours=hours-12 <br/> ; <br/><br/> //現地時間が文字盤に表示されます（2017/06/14 20など）。 23<br/><br/> x.beginPath()<br/> Text(time.toLocaleString(),150,200)</p> x.closePath();<p><p> x.save();<br/> x.beginPath();<br/> x.rotate(hours*30*Math.PI/180);// 時針を描画した後、現在の時間 * 30 が回転させる度数。 <br/> x.moveTo(0,10);<br/> save();<br/> 6*Math.PI/180); //長針についても同様です <br/> (0,10);<br/> x.beginPath ( );<br/> x.x.moveTo(0,10 );<br/> <br/> //秒針の小さな点</p><p> x.save( ); <br/> <br/> x .fillStyle="blue";<br/> x.restore() ;<br/><br/> 0,6,0,Math.PI*360/180);<br/> x. x.closePath() x.arc(250,250,3) ,0,Math.PI *360/180);<br/> このように一秒一秒が動いています。 <br/> </script>