canvas手写时钟

最新推荐文章于 2022-03-12 17:59:09 发布

FavoriteStudent

最新推荐文章于 2022-03-12 17:59:09 发布

阅读量296

点赞数

文章标签： canvas 时钟

本文链接：https://blog.csdn.net/FavoriteStudent/article/details/86680323

版权

记录一下canvas手写时钟的详细步骤，以备将来查阅

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>canvas时钟</title>
  <style>
    body {
      background-color: #333;
    }

    canvas {
      background-color: #fff;
    }
  </style>
</head>

<body>
  <canvas id="c1" width="400" height="400">
    <span>您的浏览器不支持canvas</span>
  </canvas>
  <script>
    window.onload = function () {
      function toDraw() {
        var x = 200
        var y = 200
        var r = 150

        var oDate = new Date()
        var oHours = oDate.getHours()
        var oMin = oDate.getMinutes()
        var oSen = oDate.getSeconds()

        var oHoursValue = (oHours * 30 - 90 + oMin / 60 * 30) * Math.PI / 180 // 时针对应的刻度，这里需要注意的是canvas的0度是从最右边开始算起的，而时钟的0是从最上边开始算起的，因此这里-90度
        var oMinValue = (oMin * 6 - 90 + oSen / 60 * 6) * Math.PI / 180 // 分针对应的刻度，这里oSen / 10 === (秒针走的秒数 / 60 * 6)
        var oSenValue = (oSen * 6 - 90) * Math.PI / 180 // 秒针对应的刻度

        var oC = document.getElementById('c1')
        var oGc = oC.getContext('2d')

        oGc.clearRect(0, 0, oC.width, oC.height)

        for (var i = 0; i < 60; i++) { // 画60个6度的弧形组成圆形
          oGc.beginPath()
          oGc.moveTo(x, y)
          oGc.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false)
          oGc.closePath()
          oGc.stroke()
        }

        oGc.beginPath() // 该部分主要是为了画一个比上一个圆形略小的白色的圆形遮挡住多余的部分，剩下的就是圆形边框以及60个刻度
        oGc.moveTo(x, y)
        oGc.fillStyle = '#fff'
        oGc.arc(x, y, r * 19 / 20, 0, 360, false)
        oGc.closePath()
        oGc.fill()

        for (var i = 0; i < 12; i++) { // 同上，画12个30度的弧形组成圆形
          oGc.beginPath()
          oGc.lineWidth = 3
          oGc.moveTo(x, y)
          oGc.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false)
          oGc.closePath()
          oGc.stroke()
        }

        oGc.beginPath() // 该部分同上，画一个比上一个圆形略小的白色的圆形遮挡住多余的部分，剩下的就是12个时钟的刻度
        oGc.moveTo(x, y)
        oGc.fillStyle = '#fff'
        oGc.arc(x, y, r * 18 / 20, 0, 360, false)
        oGc.closePath()
        oGc.fill()

        oGc.beginPath() // 时针
        oGc.moveTo(x, y)
        oGc.lineWidth = 5
        oGc.arc(x, y, r * 12 / 20, oHoursValue, oHoursValue, false)
        oGc.closePath()
        oGc.stroke()

        oGc.beginPath() // 分针
        oGc.moveTo(x, y)
        oGc.lineWidth = 3
        oGc.arc(x, y, r * 14 / 20, oMinValue, oMinValue, false)
        oGc.closePath()
        oGc.stroke()

        oGc.beginPath() // 秒针
        oGc.moveTo(x, y)
        oGc.lineWidth = 1
        oGc.arc(x, y, r * 19 / 20, oSenValue, oSenValue, false)
        oGc.closePath()
        oGc.stroke()
      }
      setInterval(function () {
        toDraw()
      }, 1000)
    }
  </script>
</body>

</html>

FavoriteStudent

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas手写时钟

记录一下canvas手写时钟的详细步骤，以备将来查阅&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫