canvas实现时钟转动

最新推荐文章于 2024-12-21 22:11:04 发布

原创

最新推荐文章于 2024-12-21 22:11:04 发布 · 597 阅读

标签

#canvas #html5 #javascript

收录于

1、找到canvas的中心，画出表心，以及表款

2、获取当前时间，并根据时间画出时针，分针，秒针，还有刻度

3、使用定时器，没过一秒获取新的时间，并重新绘图，达到时钟转动的效果

1、表心和表框

<!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>Document</title>
</head>
<body style="text-align: center;">
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
<script src="./index.js"></script>
</html>

// index.js
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// 设置中心点，此时300，300变成了坐标0，0
ctx.translate(300, 300)

/* 
// 这里的操作会造成大园于小圆连接
// 画圆线使用arc(中心点X，中心点Y，半径，起始角度，结束角度)
ctx.arc(0, 0, 100, 0, 2*Math.PI)
ctx.arc(0, 0, 5, 0, 2*Math.PI)
// 执行画线段