<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Draw a clock</title>
<style>
div {
text-align: center;
}
</style>
<script>
window.onload = function () {
// Get the canvas
var canvas = document.querySelector('canvas');
// Get context --> Get brushes
var context = canvas.getContext('2d');
function clock() {
// Draw the disk
context.beginPath(); // Start path
/ / Math. PI - 180 degrees
/* Parameters set the center of the circle x coordinates, the center of the circle y coordinates, circle radius, start radian, end radian */
context.arc(300.300.200.0.Math.PI * 2);
// Set the brush style
context.fillStyle = 'tomato';
context.fill();
context.closePath(); // End the path
// Draw the time degree
for (i = 0; i < 12; i++) {
context.save(); // Set the environment
context.lineWidth = 4;
context.beginPath();
// Shift the origin
context.translate(300.300);
context.rotate(i * (Math.PI / 6));
context.moveTo(0, -180); // Draw a line starting at (0,-180)
context.lineTo(0, -200); // End at (0,-200)
// Draw the outline
context.stroke();
context.fillStyle = 'black';
context.font = '28px bold';
context.rotate(Math.PI / 6);
// Make the number appear around the clock without this code
context.fillText(i + 1, -10, -220);
context.closePath();
context.restore(); // Put the drawn element back on the canvas
}
// Draw the scale
for (i = 0; i < 60; i++) {
context.save();
context.translate(300.300);
context.rotate(i * Math.PI / 30); // Set the rotation Angle
context.beginPath();
context.moveTo(0, -190);
context.lineTo(0, -200);
context.stroke();
context.closePath();
context.restore();
}
// Get the current time
var today = new Date(a);var hour = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
hour = hour + min / 60;
// Draw an hour hand
context.save();
context.lineWidth = 3;
context.translate(300.300);
context.rotate(hour * Math.PI / 6);
context.beginPath();
context.moveTo(0.10);
context.lineTo(0, -80);
context.stroke();
context.closePath();
context.restore();
// Draw the minute hand
context.save();
context.lineWidth = 2;
context.translate(300.300);
context.rotate(min * Math.PI / 30);
context.beginPath();
context.moveTo(0.10);
context.lineTo(0, -100);
context.stroke();
context.closePath();
context.restore();
// Draw the second hand
context.save();
context.lineWidth = 1;
context.translate(300.300);
context.rotate(sec * Math.PI / 30);
context.strokeStyle = 'red';
context.beginPath();
context.moveTo(0.15);
context.lineTo(0, -120);
context.stroke();
context.closePath();
context.restore();
// Draw the second hand intersection
context.save();
context.translate(300.300);
context.beginPath();
context.arc(0.0.5.0.Math.PI * 2);
context.fillStyle = '#ccc';
context.strokeStyle = 'red';
context.fill();
context.stroke();
context.closePath();
context.restore();
setTimeout(clock, 1000); // Timeout simulates intermittent
}
clock();
}
</script>
</head>
<body>
<div>
<canvas width="600px" height="600px"></canvas>
</div>
</body>
</html>
Copy the codeEffect:
