H5 canvas小案例-钟表
效果图：
直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>钟表</title>
<style type="text/css">
body{
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
#timer{
background-color: black;
}
</style>
</head>
<body>
<div id="timerbox">
<canvas id="timer" width="300" height="300"></canvas>
</div>
<script type="text/javascript">
const timer = document.querySelector("#timer");
const ct = timer.getContext("2d");
// 转换原点
ct.translate(150,150);
function drawTimer(){
// 清除上一针
ct.clearRect(-150,-150,300,300)
// 画圆
ct.beginPath();
ct.strokeStyle = 'firebrick';
ct.lineWidth = "10";
ct.arc(0,0,120,0,360,false);
ct.stroke();
ct.restore()
// 画小刻度
ct.lineWidth = "3";
ct.strokeStyle = "lightgreen";
for (var j = 0; j < 60; j++) {
ct.save()
ct.beginPath();
ct.rotate(j*6*Math.PI/180);
ct.moveTo(0,-113);
ct.lineTo(0,-103);
ct.stroke();
ct.restore()
}
// 画大刻度
ct.lineWidth = "5";
ct.strokeStyle = "hotpink";
for (var i = 0; i < 12; i++) {
ct.save()
ct.beginPath();
ct.rotate(i*30*Math.PI/180);
ct.moveTo(0,-113);
ct.lineTo(0,-93);
ct.stroke();
ct.restore()
}
const now = new Date();
let m = now.getMinutes();
let s = now.getSeconds();
let H = now.getHours() + m / 60;
H = H > 12 ? H - 12 : H;
H = H + m / 60;
m = m + s / 60;
// 画时针
ct.lineWidth = "8";
ct.strokeStyle = "lightseagreen";
ct.save()
ct.beginPath();
ct.rotate(H/12*360*Math.PI/180);
ct.moveTo(0,10);
ct.lineTo(0,-60);
ct.lineCap = "round"
ct.closePath()
ct.stroke();
ct.restore()
// 画分针
ct.lineWidth = "5";
ct.strokeStyle = "lightsalmon";
ct.save()
ct.beginPath();
ct.rotate(m/60*360*Math.PI/180);
ct.moveTo(0,20);
ct.lineTo(0,-75);
ct.lineCap = "round"
ct.closePath()
ct.stroke();
ct.restore()
// 画秒针
ct.lineWidth = "2";
ct.strokeStyle = "lightskyblue";
ct.fillStyle = "lightgreen";
ct.save()
ct.beginPath();
ct.rotate(s/ 60 *360*Math.PI/180);
ct.arc(0,-70,4,0,360,false);
ct.fill()
ct.moveTo(0,30);
ct.lineTo(0,-90);
ct.lineCap = "round"
ct.closePath()
ct.stroke();
ct.restore()
ct.fillStyle = "blue";
ct.beginPath();
ct.arc(0,0,5,0,360,false);
ct.fill();
}
drawTimer();
setInterval(drawTimer,1000);
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构