Comment: The clock implemented by html5canvas, please refer to it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CLOCK</title>
</head>
<body>
<canvas>
Your browser does not support the canvas tag, and the hour hand cannot be displayed!
</canvas>
<script type="text/javascript">
//Canvas background color
var clockBackGroundColor = "#ABCDEF";
//Hour hand color
var hourPointColor = "#000";
//The thickness of the hour hand
var hourPointWidth = 7;
//Hour hand length
var hourPointLength = 100;
//Minute hand color
var minPointColor = "#000";
//The thickness of the minute hand
var minPointWidth = 5;
//Minute hand length
var minPointLength = 150;
//Second hand color
var secPointColor = "#F00";
//Second thickness
var secPointWidth = 3;
//Second hand length
var secPointLength = 170;
//Dial color
var clockPanelColor = "#ABCDEF";
//Dial scale color
var scaleColor = "#000";
//Dial large scale width 3 6 9 12
var scaleBigWidth = 9;
//Length of the large scale of the dial
var scaleBigLength = 15;
//The width of the dial small scale
var scaleSmallWidth = 5;
//The length of the dial small scale
var scaleSmallLength = 10;
//Center color
var centerColor = 'red';
//Clock canvas
var clock = document.getElementById('clock');
clock.style.background = clockBackGroundColor;
//The drawing environment of the hour hand canvas (paintboard)
var panel = clock.getContext('2d');
//Draw lines
/**
*Draw line segments
*
*
*/
function drawLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){
//Save the incoming artboard, which is equivalent to opening a new layer every time you draw
p.save();
//Set the brush width
p.lineWidth = width;
//Set the brush color
p.strokeStyle = color;
//Newly opened the drawing path to avoid interference with the previous content on the artboard
p.beginPath();
p.translate(cX,cY);
//Rotation
p.rotate(ran);
//Move the brush to the start position
p.moveTo(startX,startY);
//Move the brush to the end position
p.lineTo(endX, endY);
//Line drawing operation
p.stroke();
//Close the drawing path to avoid interference with the content drawn on the artboard later
p.closePath();
//Overlay the layer on the incoming artboard object
p.restore();
}
/**
*Draw horizontal lines
*/
function drawHorizontalLine(p,width,length,color,startX,startY,ran,cX,cY){
drawLine(p,width,color,startX,startY,startX+length,startY,ran,cX,cY);
}
/**
*Draw circles
*/
function drawCircle(p,width,color,centreX,centreY,r){
p.save();
//Set the brush width
p.lineWidth = width;
//Set the brush color
p.strokeStyle = color;
//Newly opened the drawing path to avoid interference with the previous content on the artboard
p.beginPath();
//Draw circles
p.arc(centreX,centreY,r,0,360,false);
//Line drawing operation
p.stroke();
//Close the drawing path to avoid interference with the content drawn on the artboard later
p.closePath();
//Overlay the layer on the incoming artboard object
p.restore();
}
function drawPoint(p,width,color,centreX,centreY,r){
p.save();
//Set the brush width
p.lineWidth = width;
//Set the brush color
p.fillStyle = color;
//Newly opened the drawing path to avoid interference with the previous content on the artboard
p.beginPath();
//Draw circles
p.arc(centreX,centreY,r,0,360,false);
//Line drawing operation
p.fill();
//Close the drawing path to avoid interference with the content drawn on the artboard later
p.closePath();
//Overlay the layer on the incoming artboard object
p.restore();
}
function drawScales(p){
//Draw small scale
for(var i = 0;i < 60;i++){
drawHorizontalLine(p, scaleSmallWidth, scaleSmallLength, scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250);
}
//Draw a large scale
for(var i = 0;i < 12;i++){
drawHorizontalLine(p,i%3==0?scaleBigWidth*1.2:scaleBigWidth,i%3==0?scaleBigLength*1.2:scaleBigLength,scaleColor,195-scaleBigLength,0,i*30*Math.PI/180,250,250);
//You can add digital scales
}
}
function drawHourPoint(p,hour){
drawHorizontalLine(p,hourPointWidth,hourPointLength,hourPointColor,-10,0,(hour-3)*30*Math.PI/180,250,250);
}
function drawMinPoint(p,min){
drawHorizontalLine(p,minPointWidth,minPointLength,minPointColor,-15,0,(min-15)*6*Math.PI/180,250,250);
}
function drawSecPoint(p,sec){
drawHorizontalLine(p,secPointWidth,secPointLength,secPointColor,-15,0,(sec-15)*6*Math.PI/180,250,250);
}
function drawClock(){
panel.clearRect(0,0,500,500);
panel.fillText("",10,20);
panel.fillText("<a href="http://www.vevb.com",10,40">",10,40</a>);
var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes();
var hour = date.getHours() + min/60;
drawCircle(panel,7,'blue',250,250,200);
drawScales(panel);
drawHourPoint(panel,hour);
drawMinPoint(panel,min);
drawSecPoint(panel,sec);
drawPoint(panel,1,centerColor,250,250,7);
//drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250);
}
//drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250);
drawClock();
setInterval(drowClock,1000);
function save(){
var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream");
location.href=image;
}
</script>
</body>
</html>