canvas 绘制时钟

闲来无事就用canvas做了个时钟，代码写得有点烂，大佬勿喷

其实时钟最主要是怎么绘制秒针，分针，时针等。

绘制秒针的思路（sin(2π / 360) === sin(1°)）：
let angle = 2 * Math.PI / 360
let mz = c.getContext('2d')
mz.moveTo(300, 300)
mz.lineTo(300 + 130 * Math.sin(s * 6 * angle), 300 - 130 * Math.cos(s * 6 * angle))

通过传入s也就是秒，绘制不同的线段。因为一圈360°，总共60秒，所以每秒对应6度，所以x = 300 + 130 * Math.sin(s * 6 * angle) , y = 300 - 130 * Math.cos(s * 6 * angle)，这样就可以绘制出每秒时秒针的位置了。分针和时针同理，只不过时针1小时转过的是30度

所有代码：

<!DOCTYPE html>
<html>
<head> 
  <meta charset="utf-8"> 
  <title></title> 
</head>
<body>

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;margin: 0 auto;display: block"></canvas>

<script>
  function initPoint() { // 初始化绘制时钟上的小线条
    for (let i =0; i < 60; i++) {
      let point = c.getContext("2d")
      point.beginPath()
      if(i % 5 === 0) { // 加粗线条
        point.lineWidth = 4
        if(i === 0) // 如果是0那么显示12
          point.fillText(12 ,300 + 130 * Math.sin(6 * i * angle), 300 - 130 * Math.cos(6 * i * angle));
        else // 正常显示
          point.fillText(Math.floor((i + 1) / 5).toString(),300 + 130 * Math.sin(6 * i * angle), 300 - 130 * Math.cos(6 * i * angle));
      } else {
        point.lineWidth = 2
      }
      point.moveTo(300 + 150 * Math.sin(6 * i * angle), 300 - 150 * Math.cos(6 * i * angle)) // 绘制小线条
      point.lineTo(300 + 140 * Math.sin(6 * i * angle), 300 - 140 * Math.cos(6 * i * angle))
      point.stroke()
    }
  }
  let s = new Date().getSeconds() + 1 // 获取系统时间，因为调用setInterval 1秒后执行所以这里加1
  let m = new Date().getMinutes()
  let h = new Date().getHours() > 12 ? new Date().getHours() - 12 : new Date().getHours()
  let c = document.getElementById("myCanvas");
  let circle = c.getContext("2d"); // 绘制圆形
  let angle = 2 * Math.PI / 360
  function times(s, m, h) {
    circle.beginPath();
    circle.arc(300,300,150,0,2*Math.PI);
    circle.stroke();
    initPoint()
    let mz = c.getContext('2d')
    mz.moveTo(300, 300) // 绘制秒针 
    mz.lineTo(300 + 130 * Math.sin(s * 6 * angle), 300 - 130 * Math.cos(s * 6 * angle)) 
    mz.stroke()
    let fz = c.getContext('2d')
    fz.moveTo(300, 300) // 绘制分针
    fz.lineTo(300 + 100 * Math.sin(s * 6 * angle / 60 + m * 6 * angle), 300 - 100 * Math.cos(s * 6 * angle / 60 + m * 6 * angle))
    fz.stroke()
    let sz = c.getContext('2d')
    sz.moveTo(300, 300) // 绘制时针，因为1小时转过的是30度，所以会秒针分针比这里会多乘5
    sz.lineTo(300 + 70 * Math.sin(s * 30 * angle / 3600 + m * 30 * angle / 60 + h * 30 * angle), 300 - 70 * Math.cos(s * 30 * angle / 3600 + m * 30 * angle / 60 + h * 30 * angle))
    sz.stroke()
  }
  setInterval(() => { // 每秒重新绘制，绘制前先清除之前的
    circle.clearRect(0, 0, 600, 600)
    times(s, m, h)
    if(++s === 60) {
      s = 0
      if(++m === 60) {
        if (++h === 12)
          h = 0
      }
    }
  }, 1000)
</script>

</body>
</html>

猜你喜欢