HTML5 之 canvas(时钟)

最新推荐文章于 2021-07-22 00:39:24 发布

迷失的风景web

最新推荐文章于 2021-07-22 00:39:24 发布

阅读量377

点赞数

本文链接：https://blog.csdn.net/qq_44193048/article/details/105471247

版权

canvas是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，但是canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。
canvas画布是以左上角为坐标系的原点，且y轴的正方向向下，x轴的正方向向右。所有它的左上角就是(0,0)。
下面开始画时钟

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #mycan {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <canvas id="mycan" width="1000" height="800"></canvas>
    <script type="text/javascript">
      function time() {
        var context = document.getElementById("mycan").getContext("2d");
		//绘制最外面的圆
        context.clearRect(0, 0, 1000, 800);
        context.beginPath();
        context.arc(400, 400, 200, 0, Math.PI * 2);
        context.lineWidth = 10;
        context.strokeStyle = "blueviolet";
        context.stroke();
        context.closePath();
		//绘制圆心点
        context.beginPath();
        context.arc(400, 400, 6, 0, Math.PI * 2);
        context.lineWidth = 4;
        context.strokeStyle = "black";
        context.stroke();
        context.closePath();
		//获取系统当前时间
        var now = new Date();
        var miao = now.getSeconds();
        var fen = now.getMinutes();
        var shi = now.getHours();
        var nyr = now.getDate();
		//把时间放到画布上
        context.beginPath();
        context.font = "Bold 30px Arial";
        context.fillStyle = "red";
        context.fillText(
          "现在是:" +
            now.getFullYear() +
            "年" +
            (now.getMonth() + 1) +
            "月" +
            now.getDate() +
            "日",
          250,
          100
        );
        context.closePath();
		//因为是12小时制所以当时间大于12点是就把时间减掉12
        if (shi > 12) {
          shi = shi - 12;
        }
		//绘制刻度
        var shi1 = shi + fen / 60;
        for (var i = 0; i < 60; i++) {
          context.save();
          context.lineWidth = 7;
          context.strokeStyle = "black";
          context.translate(400, 400);
          context.rotate((i * 6 * Math.PI) / 180);
          if (i == 0 || i % 5 == 0) {
            context.beginPath();
            context.moveTo(0, -170);
            context.lineTo(0, -190);
            context.stroke();
            context.closePath();
          } else {
            context.beginPath();
            context.moveTo(0, 180);
            context.lineTo(0, 190);
            context.stroke();
            context.closePath();
          }
          context.restore();
        }
		//绘制时针
        context.save();
        context.lineWidth = 6;
        context.strokeStyle = "lightgray";
        context.translate(400, 400);
        context.rotate((shi1 * 30 * Math.PI) / 180);
        context.beginPath();
        context.moveTo(0, 10);
        context.lineTo(0, -120);
        context.stroke();
        context.closePath();
        context.restore();
		//绘制分针
        context.save();
        context.lineWidth = 4;
        context.strokeStyle = "#CCCCCC";
        context.translate(400, 400);
        context.rotate((fen * 6 * Math.PI) / 180);
        context.beginPath();
        context.moveTo(0, 14);
        context.lineTo(0, -140);
        context.stroke();
        context.closePath();
        context.restore();
		//绘制秒针
        context.save();
        context.lineWidth = 2;
        context.strokeStyle = "#c8c8c8";
        context.translate(400, 400);
        context.rotate((miao * 6 * Math.PI) / 180);
        context.beginPath();
        context.moveTo(0, 16);
        context.lineTo(0, -160);
        context.stroke();
        context.closePath();
        context.beginPath();
        context.beginPath();
        context.arc(0, -130, 4, 0, Math.PI * 2);
        context.lineWidth = 2;
        context.strokeStyle = "red";
        context.stroke();
        context.closePath();
        context.restore();
      }
      setInterval(time, 1000);
      time();
    </script>
  </body>
</html>