canvas时钟

最新推荐文章于 2024-07-24 10:40:52 发布

冰-G

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量47

点赞数

分类专栏： canvas 文章标签：前端

本文链接：https://blog.csdn.net/weixin_48956666/article/details/125377878

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<canvas
      width="500"
      height="500"
      id="canvas"
      style="height: 500px; width: 500px"
    ></canvas>

let canvas = document.querySelector('#canvas')
      // 定义上下文
      let ctx = canvas.getContext('2d')
      // 渲染时间
      function renderClock() {
        // (1)save 初始状态
        ctx.save()
        ctx.beginPath()
        ctx.translate(250, 250)
        ctx.rotate(-Math.PI / 2)
        ctx.arc(0, 0, 200, 0, 2 * Math.PI)
        ctx.strokeStyle = 'darkgrey'
        ctx.lineWidth = 10
        ctx.save()
        ctx.stroke()
        // 小时刻度
        for (let i = 0; i < 12; i++) {
          ctx.beginPath()
          ctx.rotate(Math.PI / 6)
          ctx.moveTo(180, 0)
          ctx.lineTo(200, 0)
          ctx.stroke()
        }
        // 分钟刻度
        ctx.restore()

        ctx.lineWidth = 3
        for (let i = 0; i < 60; i++) {
          ctx.beginPath()
          ctx.rotate(Math.PI / 30)
          ctx.moveTo(190, 0)
          ctx.lineTo(200, 0)
          ctx.stroke()
        }

        let hour = new Date().getHours()
        hour = hour >= 12 ? (hour -= 12) : hour
        let min = new Date().getMinutes()
        let sec = new Date().getSeconds()

        // 秒钟
        ctx.save()
        ctx.beginPath()
        ctx.lineWidth = 2
        ctx.rotate((Math.PI / 30) * sec)
        ctx.moveTo(-20, 0)
        ctx.lineTo(130, 0)
        ctx.stroke()
        ctx.restore()

        // 分钟
        ctx.save()
        ctx.beginPath()
        ctx.lineWidth = 4
        ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec)
        ctx.moveTo(-20, 0)
        ctx.lineTo(120, 0)
        ctx.stroke()
        ctx.restore()

        // 时钟
        ctx.save()
        ctx.beginPath()
        ctx.lineWidth = 10
        ctx.rotate((Math.PI / 6) * hour + (Math.PI / 360) * min + (Math.PI / 6 / 3600) * sec)
        ctx.moveTo(-10, 0)
        ctx.lineTo(100, 0)
        ctx.stroke()
        ctx.restore()
        ctx.restore()
      }

      renderClock()
      setInterval(() => {
        ctx.clearRect(0, 0, 500, 500)
        renderClock()
      }, 1000)