Simple example of canvas clock in canvas-JS Tutorial-php.cn

This is a canvas clock that I practiced writing before margin: 20px 400px 0; canvas>

var can=document.getElementsByTagName("canvas")[0]; var x=can.getContext("2d");

Function clock(){

//Clear the canvas once each time the code is executed

x.beginPath(); x.fillStyle="blue"; ); x.closePath(); (); x.fillStyle="#ffffff";

x.closePath(); ;i x.save(); //Save environment variables

x.rotate(i*6*Math.PI/180); //The interval between each scale is 6°, so i*6 draws all the scales when rotating ; x.lineTo(0,230); x.stroke(); //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 for (var a=0;a x.save();

x.beginPath(); x.rotate(a*30*Math.PI/180); x.closePath(); The sum and minutes must be accurate to the decimal point

var time=new Date();

var seconds=time.getSeconds(); var minutes=time.getMinutes()+seconds/60; var hours=time.getHours()+minutes/60;

var hours=time.getHours()+minutes/60; hours>12){ hours=hours-12

to ’s ’s to ensue ’s to 20: 23-- beginPath () Path(); *30*Math.PI/180);//After drawing the hour hand, the current hour *30 is the number of degrees that should be rotated. x.restore( );

x.lineWidth=3; x.rotate(minutes*6*Math.PI/180); //The same applies to the minute hand (); x.closePath(); ath(); x.moveTo(0,10 ); // The small dot on the second hand

x.save(); x.beginPath(); 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 x.fillStyle="blue"; *360/180); Click

x.beginPath(); x.closePath(); (250,250,3,0,Math.PI*360/180); x.fill(); x.closePath();

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.

## Effect