canvas绘制表

最新推荐文章于 2024-04-14 01:45:29 发布

永不满足的求知者

最新推荐文章于 2024-04-14 01:45:29 发布

阅读量300

点赞数

文章标签： javascript canva可画

本文链接：https://blog.csdn.net/qq_41154522/article/details/132245472

版权

请添加图片描述

<!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>
    <canvas id="c1" width="600" height="600"
      >当前浏览器不支持canvas，请下载最新的浏览器</canvas
    >
    <script>
      // 1. 找到画布
      /** @type {HTMLCanvasElement} */
      var c1 = document.getElementById("c1");
      // 判断是否有getContext
      if (!c1.getContext) {
        console.log("当前浏览器不支持canvas，请下载最新的浏览器");
      }
      // 获取画笔，上下文对象
      var ctx = c1.getContext("2d");

      function render() {
        ctx.clearRect(0, 0, 600, 600);
        // 存档 保存当前坐标位置和上下文对象的状态
        ctx.save();
        ctx.translate(400, 300);
        ctx.rotate(-Math.PI / 2);
        ctx.save();
        for (let i = 0; i < 12; i++) {
          // 绘制小时的刻度
          ctx.beginPath();
          ctx.moveTo(170, 0);
          ctx.lineTo(190, 0);
          ctx.lineWidth = 8;
          ctx.strokeStyle = "gray";
          ctx.stroke();
          ctx.closePath();
          ctx.rotate((2 * Math.PI) / 12);
        }

        ctx.restore();
        ctx.save();
        for (let i = 0; i < 60; i++) {
          // 绘制小时的刻度
          ctx.beginPath();
          ctx.moveTo(180, 0);
          ctx.lineTo(190, 0);
          ctx.lineWidth = 2;
          ctx.strokeStyle = "gray";
          ctx.stroke();
          ctx.closePath();
          ctx.rotate((2 * Math.PI) / 60);
        }
        ctx.restore();
        ctx.save();

        // 获取当前时间
        var time = new Date();
        var hour = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();
        hour = hour >= 12 ? hour - 12 : hour;

        // 绘制秒针
        ctx.rotate(((2 * Math.PI) / 60) * sec);
        ctx.beginPath();
        ctx.moveTo(-30, 0);
        ctx.lineTo(190, 0);
        ctx.lineWidth = 2;
        ctx.strokeStyle = "red";
        ctx.stroke();
        ctx.closePath();

        ctx.restore();
        ctx.save();

        // 绘制分针
        ctx.rotate(
          ((2 * Math.PI) / 60) * min + ((2 * Math.PI) / 60 / 60) * sec
        );
        ctx.beginPath();
        ctx.moveTo(-30, 0);
        ctx.lineTo(150, 0);
        ctx.lineWidth = 2;
        ctx.strokeStyle = "blue";
        ctx.stroke();
        ctx.closePath();

        ctx.restore();
        ctx.save();

        // 绘制时针
        ctx.rotate(
          ((2 * Math.PI) / 12) * hour +
            ((2 * Math.PI) / 12 / 60) * min +
            ((2 * Math.PI) / 12 / 60 / 60) * sec
        );
        ctx.beginPath();
        ctx.moveTo(-15, 0);
        ctx.lineTo(120, 0);
        ctx.lineWidth = 6;
        ctx.strokeStyle = "green";
        ctx.stroke();
        ctx.closePath();

        ctx.restore();
        ctx.restore();
        requestAnimationFrame(render);
      }
      render();
    </script>
  </body>
</html>