JS implementation clock

// console.log(“number=” + number, “index=” + index);

var rad = 2 * pi / 12 * index;

var x = Math.cos(rad) * (r - 30);

var y = Math.sin(rad) * (r - 30);

ctx.textAlign = ‘center’;

// Let the number fall at the center of the coordinate

ctx.textBaseline = ‘middle’;

ctx.fillStyle = “black”;

// The coordinates are (x,y) Where you can draw number

ctx.fillText(number, x, y);

});

// Draw scales

var i;

for (i = 0; i < 60; i++) {

var rad = (2 * pi / 60) * i;

var x = Math.cos(rad) * (r - 20) ;

// console.log(“x=” + x);

var y = Math.sin(rad) * (r - 20);

// console.log(“y=” + y);

ctx.beginPath();

// Start drawing circle

ctx.arc(x, y, 2, 0, 2 * pi);

if (i % 5 == 0) {

ctx.fillStyle = “black”;

}

else {

ctx.fillStyle = “gray”;

}

ctx.fill();

}

}

// Draw a second hand

function drawsecond(ms) {

ctx.save();

// Clear the sub path list to start a new path .

ctx.beginPath();

var rad = (2 * pi / 60)*(ms-15);

// Rotate the canvas

ctx.rotate(rad);

ctx.moveTo(-5,0);

ctx.lineTo(90,0);

ctx.lineWidth = 1;

ctx.strokeStyle = “red”;

ctx.lineCap = “round”;

ctx.stroke();

ctx.restore();

}

// Draw minute hand

function drawminute(minute) {

ctx.save();

// Clear the sub path list to start a new path .

ctx.beginPath();

var rate=(2pi/60)(minute-15);

ctx.rotate(rate);

ctx.moveTo(0,0);

ctx.lineTo(70,0);

ctx.lineWidth = 2;

ctx.lineCap=“round”;

ctx.strokeStyle = “blue”;

ctx.stroke();

ctx.restore();

}

// Draw the clock

function drawhour(hour, minute) {

// Clear the sub path list to start a new path .

ctx.save();

ctx.beginPath();

// Radians per hour

var rad = (2 * pi/12)*(hour-3) ;

// Radians per minute

var mrad = (2 * pi/12 / 60)*(minute-15);

// Rotate the canvas

ctx.rotate(rad + mrad);

// Set canvas style

ctx.lineWidth = 3;

ctx.lineCap = “round”;

ctx.strokeStyle = “black”;

ctx.moveTo(0,0);

ctx.lineTo(45,0);

ctx.stroke();

ctx.restore();

}

function start() {

ctx.clearRect(-250,-200, 500,400);

var time = new Date();

var hour = time.getHours();

console.log(hour);

var minute = time.getMinutes();

var second = time.getSeconds 《 A big factory Java Analysis of interview questions + Back end development learning notes + The latest architecture explanation video + Practical project source code handout 》 Free open source Prestige search official account 【 Advanced programming 】 ();

console.log(second);

console.log(“second=”+second);

drawBackground();

drawTime();

drawhour(hour,minute);

drawminute(minute);

drawsecond(second);

}

start();

// Every time 1 Refresh every second

setInterval(start, 1000);