HTML5 drawing clock animation_html5 tutorial skills

Copy code

The code is as follows:

var clock=document.getElementById("clock ");
var cxt=clock.getContext("2d");
function drawNow(){
var now=new Date();
var hour=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
hour=hour>12?hour-12:hour;
hour=hour min/60;
//Dial (blue)
cxt.lineWidth=10;
cxt.strokeStyle="blue"
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
//Scale
//Time scale
for(var i=0;i<12;i ){
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(i*30*Math. PI/180);//Rotation angle*Math.PI/180=radians
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,- 190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//Score
for(var i=0 ;i<60;i ){
cxt.save();
//Set the thickness of the sub-scales
cxt.lineWidth=5;
//Reset the canvas origin
cxt. translate(250,250);
//Set the rotation angle
cxt.rotate(i*6*Math.PI/180);
//Draw the minute hand scale
cxt.strokeStyle="black";
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke ();
cxt.restore();
}
//Hour hand
cxt.save();
// Set the hour hand style
cxt.lineWidth=7;
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt .moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//Minute hand
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
//Set the center of the minute hand canvas in different dimensions
cxt .translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt .lineTo(0,15);
cxt.closePath();
cxt.stroke()
cxt.restore();
//Second hand
cxt.save();
//Set the style of the second hand
//Color: red
cxt.strokeStyle="red";
cxt.lineWidth=3;
//Reset the origin
cxt.translate (250,250);
//Set the angle
//cxt.rotate(330*Math.PI/180);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//Draw the intersection of hour hand, minute hand and second hand
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//Set fill
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();
//Draw the small dot for the second hand
cxt.beginPath();
cxt.arc(0,-140,5,0,360,false);
cxt.closePath();
//Set the fill
cxt.fillStyle="gray";
cxt.fill();
//cxt.strokeStyle="red";
cxt.stroke();

cxt.restore();

}
function drawClock(){
cxt.clearRect(0,0,500,500);
drawNow();
}
drawNow();
setInterval(drawClock, 1000);