Simple example of canvas clock in canvas

This is a canvas clock that I practiced writing before

                                         margin: 20px 400px 0;
                                                                                                                                                                                                                                                                              canvas>

　　<script><br> 　　　var can=document.getElementsByTagName("canvas")[0];<br> 　　　var x=can.getContext("2d");<br><br> Function clock(){<br><br> 　　　 //Clear the canvas once each time the code is executed</p> 　　x.beginPath();<p> x.fillStyle="blue";<br> ); <br> 　　 　 x.closePath(); ();<br>　　　 x.fillStyle="#ffffff";<br>　　　</p> 　　 　　x.closePath(); ;i<60;i++){<p>　　　　 x.save(); //Save environment variables<br/>　　　</p>　　　x.rotate(i*6*Math.PI/180); //The interval between each scale is 6°, so i*6 draws all the scales when rotating<p>　　　;<br/>　　　　　x.lineTo(0,230);<br/>　　　　　 x.stroke(); <br/>　　　　 //Clock scales, there are only 12 clock scales, so 360/12 The interval between each one is 30°. The principle is the same as the minute scale. Of course you can also loop more, such as changing the scales to numbers<br/>　　　for (var a=0;a<12;a++){<br/>　　　　 x.save();</p>　　　 x.beginPath();<p>　　　<br/>　　　　 x.rotate(a*30*Math.PI/180);<br/>　　　x.closePath();<br/>　　　　　The sum and minutes must be accurate to the decimal point<br/><br/> 　　　var time=new Date();</p> 　　　var seconds=time.getSeconds();<p> 　　　　var minutes=time.getMinutes()+seconds/60; <br/>               var hours=time.getHours()+minutes/60;<br/><br/>                                                                                                                                                            var hours=time.getHours()+minutes/60; hours>12){<br>                                                                 hours=hours-12<br>                            <br><br>                                      to ’s ’s to ensue ’s to 20: 23-- beginPath () <br><p>　　　　　　　　　　　　Path();<br>                           *30*Math.PI/180);//After drawing the hour hand, the current hour *30 is the number of degrees that should be rotated. <br>                              ​​​​​​x.restore( );<br><br> 　　　　　　　　​x.lineWidth=3;<br> x.rotate(minutes*6*Math.PI/180); //The same applies to the minute hand<br> ();<br>                  x.closePath(); ath();<br>                                                      x.moveTo(0,10 );<br>                           ​ // The small dot on the second hand<br></p> 　　 　　x.save();<p> 　　　　x.beginPath();<br> PI/180);//Let the small dot of the second hand follow the position of the second hand, which is actually the same as the second hand<br>          x.fillStyle="blue";<br>            *360/180);<br>                                                      Click<br> <br> 　 　 　 　 x.beginPath();<br> 　　<br>                   x.closePath(); (250,250,3,0,Math.PI*360/180);<br> x.fill();<br> x.closePath();</p> <p> setInterval(clock,1000) ; //Run this method every second. It will first clear the canvas and then redraw it so that the time is moving every second. <br>　</script>




## Effect

　

The above is the detailed content of Simple example of canvas clock in canvas. For more information, please follow other related articles on the PHP Chinese website!