<!DOCTYPE html>
<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>绘制时钟</title>
<style>
div {
text-align: center;
}
</style>
<script>
window.onload = function () {
// 获取画布
var canvas = document.querySelector('canvas');
// 获取上下文-->获取画笔
var context = canvas.getContext('2d');
function clock() {
// 绘制圆盘
context.beginPath(); //开始路径
// Math.PI--180度
/*参数设置
圆心x轴坐标, 圆心y轴坐标, 圆半径, 开始弧度, 结束弧度
*/
context.arc(300, 300, 200, 0, Math.PI * 2);
//设置画笔样式
context.fillStyle = 'tomato';
context.fill();
context.closePath(); //结束路径
// 绘制时刻度
for (i = 0; i < 12; i++) {
context.save(); //设置环境
context.lineWidth = 4;
context.beginPath();
//将原点平移
context.translate(300, 300);
context.rotate(i * (Math.PI / 6));
context.moveTo(0, -180); // 画线 从(0,-180)开始
context.lineTo(0, -200); //到(0,-200)结束
// 绘制轮廓
context.stroke();
context.fillStyle = 'black';
context.font = '28px bold';
context.rotate(Math.PI / 6);
//使数字出现在钟的四周，没有这句代码也行
context.fillText(i + 1, -10, -220);
context.closePath();
context.restore(); // 将绘制后的元素放回画布
}
// 绘制分刻度
for (i = 0; i < 60; i++) {
context.save();
context.translate(300, 300);
context.rotate(i * Math.PI / 30); //设置旋转角度
context.beginPath();
context.moveTo(0, -190);
context.lineTo(0, -200);
context.stroke();
context.closePath();
context.restore();
}
// 获取当前时间
var today = new Date();
var hour = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
hour = hour + min / 60;
// 绘制时针
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();
// 绘制分针
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();
// 绘制秒针
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();
// 绘制秒针交叉处
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); //超时模拟间歇
}
clock();
}
</script>
</head>
<body>
<div>
<canvas width="600px" height="600px"></canvas>
</div>
</body>
</html>
效果：
