<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="clock"></canvas>
</body>
<script>
let clock = document.querySelector('#clock');
let ctx = clock.getContext("2d");
let radius = 150
let height = 600, width = 600;
let centerX = width / 2, centerY = height / 2;
clock.setAttribute("height", height)
clock.setAttribute("width", width)
runClock();
setInterval(() => {
runClock()
}, 1000)
function runClock() {
// 清除画布
ctx.clearRect(0, 0, height, height);
ctx.save(); // 保存上次画布
ctx.beginPath();
ctx.lineWidth = 8;
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = '#DEDEDE';
ctx.fill();
ctx.fillStyle = '#000';
ctx.stroke();
ctx.closePath();
ctx.restore(); // 恢复到上次画布保存设置
ctx.save();
for (let i = 0; i < 12; i++) {
// 画小时刻度
drawHoursDot(i)
}
ctx.restore();
ctx.save();
for (let i = 0; i < 60; i++) {
// 画分钟刻度
drawMinsDot(i)
}
ctx.restore();
let now = new Date();
let h = now.getHours();
let m = now.getMinutes();
let s = now.getSeconds();
ctx.save();
// 24小时制转12小时制
if (h > 12) h = h - 12;
// 时针旋转的角度
let hourRotateDeg = 30 * h + m / 60 * 30;
// 画时钟指针
drwaHourPointer(hourRotateDeg);
ctx.restore();
ctx.save();
// 分针旋转的角度
let minRotateDeg = 6 * m + s / 60 * 6;
// 画分钟指针
drawMinPointer(minRotateDeg);
ctx.restore();
ctx.save();
// 秒针旋转的角度
let secRotateDeg = 6 * s;
// 画秒钟指针
drawSecPointer(secRotateDeg);
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.translate(centerX, centerY);
ctx.arc(0, 0, 8, 0, 2 * Math.PI);
ctx.shadowBlur = 8;
ctx.shadowColor = "#666";
ctx.fillStyle = '#c00';
ctx.fill();
ctx.closePath();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.translate(centerX, centerY);
let grd = ctx.createRadialGradient(0, 0, 3, 0, 0, 6);
grd.addColorStop(0, '#fff');
grd.addColorStop(1, '#c00');
ctx.fillStyle = grd;
ctx.arc(0, 0, 6, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
ctx.restore();
}
function drawHoursDot(index) {
ctx.beginPath();
if (index == 0) {
ctx.translate(centerX, centerY);
ctx.strokeStyle = '#4A4A4A';
ctx.lineWidth = 3;
ctx.lineCap = "round";
}
ctx.rotate(30 * Math.PI / 180)
ctx.moveTo(0, -140);
ctx.lineTo(0, -130);
ctx.stroke();
ctx.closePath();
}
function drawMinsDot(index) {
ctx.beginPath();
if (index == 0) {
ctx.translate(centerX, centerY);
ctx.strokeStyle = '#4A4A4A';
ctx.lineWidth = 2;
ctx.lineCap = "round";
}
ctx.rotate(6 * Math.PI / 180)
ctx.moveTo(0, -140);
ctx.lineTo(0, -136);
ctx.stroke();
ctx.closePath();
}
function drwaHourPointer(deg = 0) {
ctx.beginPath();
ctx.translate(centerX, centerY);
ctx.rotate(deg * Math.PI / 180)
ctx.moveTo(0, 8);
ctx.quadraticCurveTo(5, 8, 0, -80);
ctx.moveTo(0, 8);
ctx.quadraticCurveTo(-5, 8, 0, -80);
ctx.fillStyle = '#4A4A4A'
ctx.fill();
ctx.closePath();
}
function drawMinPointer(deg = 0) {
ctx.beginPath();
ctx.translate(centerX, centerY);
ctx.rotate(deg * Math.PI / 180)
ctx.moveTo(0, 8);
ctx.quadraticCurveTo(4, 8, 0, -100);
ctx.moveTo(0, 8);
ctx.quadraticCurveTo(-4, 8, 0, -100);
ctx.fillStyle = '#4A4A4A'
ctx.fill();
ctx.closePath();
}
function drawSecPointer(deg = 0) {
ctx.beginPath();
ctx.translate(centerX, centerY);
ctx.rotate(deg * Math.PI / 180)
ctx.moveTo(-1.5, 16);
ctx.lineTo(1.5, 16);
ctx.lineTo(0, -120);
ctx.lineTo(0, -120);
ctx.fillStyle = '#c00'
ctx.fill();
ctx.closePath();
}
</script>
</html>
网友评论