At this time, the needle is centered on the center of the canvas;
g.translate(width/2,width/2);
This function moves the origin of the canvas to (width/2,width/2)
Drawing dial
function jiang(){ r = width/2 g.clearRect(0, 0, 600, 600); g.save(); g.translate(r, r); g.rotate(-Math.PI / 2); //Minute tick mark for(var i = 0; i < 60; i++) {//Draw 60 tick marks g.beginPath(); g.strokeStyle ="white"; g.lineWidth = 4; g.moveTo(250, 0); g.lineTo(240, 0); g.stroke(); g.rotate(Math.PI / 30); //Each 6 deg Draw a clock tick mark g.closePath(); } //Clock tick mark for(var i = 0; i < 12; i++) {//Draw 12 tick marks g.beginPath(); g.strokeStyle ="white"; g.lineWidth = 8; g.moveTo(250, 0); g.lineTo(230, 0); g.stroke(); g.rotate(Math.PI / 6); //Each 30 deg Draw a clock scale g.closePath(); } }
Hour hand
Save and restore are indispensable. Between these two functions, changing the location will not affect other functions. In this code, it refers to rotate in particular. If there is no rotate, save and restore can be avoided
Be sure to add beginPath to avoid being affected by other functions
The hour hand is different from the minute hand and the second hand. A 30 ° and the movement of the minute hand will affect the position of the hour hand
The principle of clockwise motion is to draw a line and then rotate that line
function drawHour(hour,minu){ g.save(); g.beginPath(); g.lineWidth = 9; var rad = Math.PI*2/12*hour; var radMinu = Math.PI*2/12/60*minu; g.rotate(rad + radMinu) g.moveTo(-10,0); g.lineTo(r/2,0); g.strokeStyle = "white"; g.stroke(); g.restore(); }
Minute hand
function drawMinu(minu){ g.save(); g.beginPath(); g.lineWidth = 6; var radMinu = Math.PI*2/60*minu; g.rotate(radMinu) g.moveTo(-16,0); g.lineTo(r-100,0); g.strokeStyle = "white"; g.stroke(); g.restore(); }
Second hand
function drawSeco(seco){ g.save(); g.beginPath(); g.lineWidth = 3; var radSeco = Math.PI*2/60*seco; g.rotate(radSeco) g.moveTo(-25,0); g.lineTo(r-80,0); g.strokeStyle = "#ff0032"; g.stroke(); g.restore(); }
Digital table
function drawNumClock(){ var data = new Date(); var sec = data.getSeconds(); var min = data.getMinutes(); var hour = data.getHours(); g.fillStyle = "white"; g.font = "20px 'Regular script'"; g.beginPath(); g.rotate(Math.PI/2) g.fillText(hour,60,0); g.fillText(":",80,0); g.fillText(min,90,0); g.font = "20px 'Regular script'"; g.fillText(sec,120,0); }
The overall code is attached below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Clock</title> <style type="text/css"> .kuang{ width: 600px; height: 600px; margin: auto; padding: 5; } </style> </head> <body> <div> <canvas id="zhong" width="600" height="600"></canvas> </div> <script type="text/javascript"> var canvas =document.querySelector("canvas"); canvas.style.background ="paleturquoise"; var g = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; //Draw turntable clock function jiang(){ r = width/2 g.clearRect(0, 0, 600, 600); g.save(); g.translate(r, r); g.rotate(-Math.PI / 2); //Minute tick mark for(var i = 0; i < 60; i++) {//Draw 60 tick marks g.beginPath(); g.strokeStyle ="white"; g.lineWidth = 4; g.moveTo(250, 0); g.lineTo(240, 0); g.stroke(); g.rotate(Math.PI / 30); //Each 6 deg Draw a clock tick mark g.closePath(); } //Clock tick mark for(var i = 0; i < 12; i++) {//Draw 12 tick marks g.beginPath(); g.strokeStyle ="white"; g.lineWidth = 8; g.moveTo(250, 0); g.lineTo(230, 0); g.stroke(); g.rotate(Math.PI / 6); //Each 30 deg Draw a clock scale g.closePath(); } } /*Hour hand*/ function drawHour(hour,minu){ g.save(); g.beginPath(); g.lineWidth = 9; var rad = Math.PI*2/12*hour; var radMinu = Math.PI*2/12/60*minu; g.rotate(rad + radMinu) g.moveTo(-10,0); g.lineTo(r/2,0); g.strokeStyle = "white"; g.stroke(); g.restore(); } /*Draw a minute hand*/ function drawMinu(minu){ g.save(); g.beginPath(); g.lineWidth = 6; var radMinu = Math.PI*2/60*minu; g.rotate(radMinu) g.moveTo(-16,0); g.lineTo(r-100,0); g.strokeStyle = "white"; g.stroke(); g.restore(); } /*Second hand painting*/ function drawSeco(seco){ g.save(); g.beginPath(); g.lineWidth = 3; var radSeco = Math.PI*2/60*seco; g.rotate(radSeco) g.moveTo(-25,0); g.lineTo(r-80,0); g.strokeStyle = "#ff0032"; g.stroke(); g.restore(); } /*Digital table*/ function drawNumClock(){ var data = new Date(); var sec = data.getSeconds(); var min = data.getMinutes(); var hour = data.getHours(); g.fillStyle = "white"; g.font = "20px 'Regular script'"; g.beginPath(); g.rotate(Math.PI/2) g.fillText(hour,60,0); g.fillText(":",80,0); g.fillText(min,90,0); g.font = "20px 'Regular script'"; g.fillText(sec,120,0); } function draw(){ var data = new Date(); var sec = data.getSeconds(); var min = data.getMinutes(); var hour = data.getHours(); jiang(); drawHour(hour,min); drawMinu(min); drawSeco(sec); drawNumClock() g.restore(); } setInterval(draw,10) </script> </body> </html>