原生JS实现Canvas时钟

最新推荐文章于 2023-04-17 23:20:47 发布

weixin_34402090

最新推荐文章于 2023-04-17 23:20:47 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/garmin6/p/10613144.html

版权

HTML中只有一个div包裹一个canvas元素，重点看JS部分。

重点：

beginPath() 方法在一个画布中开始子路径的一个新的集合。也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新的路径。
ctx.save()表示保存save函数之前的状态，ctx.restore()表示获取save保存的状态
其他方法参考API

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clock</title>
  <style>
    div {
      text-align: center;
      margin-top: 100px;
    }
    #clock {
      border-radius: 50%;
      box-shadow: 2px 2px 20px #eee;
    }
  </style>
</head>
<body>
  <div>
    <canvas id="clock" height="600px" width="600px"></canvas>    
  </div>  
  <script>
    window.onload = function() {
      var dom = document.getElementById('clock');
      var ctx = dom.getContext('2d');
      var width = ctx.canvas.width;
      var height = ctx.canvas.height;
      var r = width / 2;
      var ratio = width / 200;
      dom.onmouseover = function () {
        dom.style.boxShadow = "2px 2px 20px #ddd";
      }
      dom.onmouseout = function () {
        dom.style.boxShadow = "2px 2px 20px #eee";
      }

      function drawBackground() {
        ctx.save()
        ctx.translate(r, r);
        ctx.lineWidth = 6 * ratio;
        ctx.beginPath();
        ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#fff'
        ctx.fill();

        var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        ctx.font = 18 * ratio + "px Arial";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        hourNumbers.forEach(function(number, i) {
          var rad = 2 * Math.PI / 12 * i;
          var x = Math.cos(rad) * (r - 30 * ratio);
          var y = Math.sin(rad) * (r - 30 * ratio);
          ctx.fillStyle = '#333'
          ctx.fillText(number, x, y);
        });

        for(var i = 0; i < 60; i++) {
          var rad = 2 * Math.PI / 60 * i;      
          var x = Math.cos(rad) * (r - 15 * ratio);
          var y = Math.sin(rad) * (r - 15 * ratio);
          ctx.beginPath();
          if (i % 5 === 0) {
            ctx.fillStyle = '#666';
            ctx.arc(x, y, 1.5 * ratio, 0, 2 * Math.PI, false);
          } else {
            ctx.fillStyle = '#666';
            ctx.arc(x, y, 1 * ratio, 0, 2 * Math.PI, false);
          }
          ctx.fill();
        }
      }

      function drawHour(hour, minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 * hour;
        var mrad = 2 * Math.PI /12 /60 *minute;
        ctx.rotate(rad + mrad);
        ctx.lineWidth = 6 * ratio;
        ctx.lineCap = 'round';
        ctx.moveTo(0, 10 * ratio);
        ctx.lineTo(0, -r / 2 + 4 * ratio);
        ctx.stroke();
        ctx.restore();
      }

      function drawMinute(minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad);
        ctx.lineWidth = 3 * ratio;
        ctx.lineCap = 'round';
        ctx.moveTo(0, 10 * ratio);
        ctx.lineTo(0, -r / 2 - 4 * ratio);
        ctx.stroke();
        ctx.restore();
      }

      function drawSecond(second) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = '#930'
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad);    
        ctx.moveTo(-2 * ratio, 20 * ratio);
        ctx.lineTo(2 * ratio, 20 * ratio);
        ctx.lineTo(1, -r / 2 - 12 * ratio);
        ctx.lineTo(-1, -r / 2 - 12 * ratio);
        ctx.fill();
        ctx.restore();
      }

      function drawDot() {
        ctx.beginPath();
        ctx.fillStyle = '#EEE';
        ctx.arc(0, 0, 3 * ratio, 0, 2 * Math.PI, false);
        ctx.fill();
      }

      function draw() {
        ctx.clearRect(0, 0, width, height);
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        drawBackground();
        drawDot();
        drawHour(hour, minute);
        drawMinute(minute);
        drawSecond(second);
        ctx.restore();
      }
      draw();
      setInterval(draw, 1000);
    }
  </script>
</body>
</html>

转载于:https://www.cnblogs.com/garmin6/p/10613144.html

weixin_34402090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现Canvas时钟

HTML中只有一个div包裹一个canvas元素，重点看JS部分。重点：beginPath() 方法在一个画布中开始子路径的一个新的集合。也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新的路径。ctx.save()表示保存save函数之前的状态，ctx.restore()表示获取save保存的状态其他方法参考API...
复制链接

扫一扫