前端学习笔记之canvas实现时钟
最近学习了canvas,刚好写了一个时钟，所以就分享出来和大家交流一下！
下面是完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彩虹时钟</title>
<style>
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.can {
border: green 1px dashed;
}
</style>
</head>
<body>
<canvas class="can" width="600" height="600"></canvas>
<script>
function time() {
const cans = document.querySelector(".can");
const pen = cans.getContext("2d");
const now = new Date();
const pi = Math.PI;
const W = cans.offsetWidth;
const H = cans.offsetHeight;
const second = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
pen.save();
pen.translate(300, 300);
pen.rotate(-pi / 2)
pen.clearRect(-300, -300, W, H);
pen.beginPath();
pen.arc(0, 0, 200, 0, 2 * pi);
pen.lineWidth = "10";
pen.strokeStyle = "red";
pen.stroke();
pen.beginPath();
pen.arc(0, 0, 190, 0, 2 * pi);
pen.lineWidth = "10";
pen.strokeStyle = "orange";
pen.stroke();
pen.beginPath();
pen.arc(0, 0, 180, 0, 2 * pi);
pen.lineWidth = "10";
pen.strokeStyle = "yellow";
pen.stroke();
pen.beginPath();
pen.arc(0, 0, 170, 0, 2 * pi);
pen.lineWidth = "10";
pen.strokeStyle = "green";
pen.stroke();
pen.beginPath();
pen.arc(0, 0, 160, 0, 2 * pi);
pen.lineWidth = "10";
pen.strokeStyle = "blue";
pen.stroke();
pen.beginPath();
pen.arc(0, 0, 150, 0, 2 * pi);
pen.lineWidth = "10";
pen.strokeStyle = "cyan";
pen.stroke();
//时针刻度
pen.save();
for (let i = 0; i < 12; i++) {
pen.beginPath();
pen.rotate(pi / 6);
pen.moveTo(125, 0);
pen.lineTo(145, 0);
pen.strokeStyle = "black";
pen.stroke();
}
pen.restore();
//分针刻度
pen.save();
for (i = 0; i < 60; i++) {
if (i % 5 != 0) {
pen.beginPath();
pen.moveTo(135, 0);
pen.lineTo(145, 0);
pen.lineWidth = 5;
pen.strokeStyle = "black";
pen.stroke();
}
pen.rotate(pi / 30);
}
pen.restore();
// 时针
pen.save();
pen.rotate(hours * (pi / 6))
pen.lineWidth = 10;
pen.beginPath();
pen.moveTo(-22, 0);
pen.lineTo(80, 0);
pen.strokeStyle = "black"
pen.stroke();
pen.beginPath();
pen.moveTo(-22, 0);
pen.lineTo(60, 0);
pen.lineWidth = 4;
pen.strokeStyle = "#black"
pen.restore();
// 分针
pen.save();
pen.rotate((pi / 30) * minutes)
pen.lineWidth = 8;
pen.beginPath();
pen.moveTo(-30, 0);
pen.lineTo(112, 0);
pen.strokeStyle = "black"
pen.stroke();
pen.restore();
// 秒针
pen.save();
pen.rotate(second * (pi / 30));
pen.lineWidth = 4;
pen.beginPath();
pen.moveTo(-35, 0);
pen.lineTo(130, 0);
pen.strokeStyle = "red"
pen.stroke();
pen.beginPath();
pen.arc(0, 0, 6, 0, pi * 2, true);
pen.fillStyle = "white"
pen.fill();
pen.beginPath();
pen.arc(110, 0, 4, 0, pi * 2, false);
pen.strokeStyle = "red"
pen.stroke();
pen.fillStyle = "transparency";
pen.arc(0, 0, 3, 0, pi * 2, true);
pen.fill();
pen.restore();
pen.restore();
//时间函数
window.requestAnimationFrame(() => { time() });
}
time()
</script>
</body>
</html>
