canvas绘制时钟

最新推荐文章于 2023-10-25 17:07:02 发布

原创最新推荐文章于 2023-10-25 17:07:02 发布 · 480 阅读

1 ·

CC 4.0 BY-SA版权

本文为艾夏SEO博主原创文章，未经博主允许不得转载。

文章标签：

#canvas #时钟

Canvas 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用HTML5的Canvas API来创建一个实时更新的动态时钟，包括设置画布、绘制时钟背景、绘制时针、分针和秒针的步骤，以及实现时间同步的技巧。

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<canvas width="500" height="500" style="border: 1px solid red;"></canvas>
<script>
// 1.获取canvas对象
var canvas = document.querySelector('canvas');

// 2.获取绘图环境
var ctx = canvas.getContext('2d');

// 3.提前将坐标原点移动到中心点
ctx.translate(canvas.width / 2, canvas.height / 2);

setInterval(function() {
// 4.0 清空画布
ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
/*
3.钟表
表盘：圆
刻度：时针(12)和分针(60)刻度
三针：时分秒针
数字

表动起来
*/
// 4.1 表盘
ctx.beginPath();
ctx.arc(0, 0, 250, 0, Math.PI * 2, false);
ctx.closePath();
ctx.stroke();

// 4.2 分针刻度（60个刻度）全圆 2PI = 60刻度 1刻度 = 2PI/60
for (var i = 0; i < 60; i++) {
ctx.save();
ctx.beginPath();
ctx.rotate(2 * Math.PI / 60 * i);
ctx.moveTo(0, -240);
ctx.lineTo(0, -250);
ctx.stroke();
ctx.restore();
}

// 4.3 时针刻度（12个刻度） 2PI/12
for (var i = 0; i < 12; i++) {
ctx.save();
ctx.beginPath();
ctx.rotate(2 * Math.PI / 12 * i);
ctx.moveTo(0, -230);
ctx.lineTo(0, -250);
ctx.lineWidth = 3;
ctx.stroke();
ctx.restore();
}

// 4.4 三针
// 获取时分秒
var d = new Date();

var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
/*
9:55:25
1个小时=>2PI/12 总小时数旋转的弧度：9+55/60+25/3600 * 2PI/12
1分钟=>2PI/60 总分钟数旋转的弧度：55+25/60 * 2PI/60
1秒钟=>2PI/60 总分钟数旋转的弧度：25 * 2PI/60
*/
// 时针
ctx.save();
ctx.beginPath();
ctx.rotate((hour + minute / 60 + second / 3600) * 2 * Math.PI / 12);
ctx.moveTo(0, 20);
ctx.lineTo(0, -100);
ctx.lineWidth = 6;
ctx.stroke();
ctx.restore();

// 分针
ctx.save();
ctx.beginPath();
ctx.rotate((minute + second / 60) * 2 * Math.PI / 60);
ctx.moveTo(0, 20);
ctx.lineTo(0, -150);
ctx.lineWidth = 4;
ctx.stroke();
ctx.restore();

// 秒针
ctx.save();
ctx.beginPath();
ctx.rotate(second * 2 * Math.PI / 60);
ctx.moveTo(0, 20);
ctx.lineTo(0, -200);
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.restore();

for (var i = 1; i <= 12; i++) {
ctx.save();
var x = 210 * Math.sin(Math.PI * 2 / 12 * i);
var y = 210 * Math.cos(Math.PI * 2 / 12 * i);

ctx.font = '30px 微软雅黑';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
// 绘制数字
ctx.fillText(i, x, -y);
ctx.restore();
}

}, 1000)
</script>
</body>

</html>