canvas制作时钟

最新推荐文章于 2024-02-22 16:53:56 发布

Xwf1023

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量186

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/xwf1023/article/details/126787924

版权

HTML5 canvas 动态时钟 JavaScript 动画

关键词由CSDN通过智能技术生成

<!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>
    <style>
      .clock {
        width: 400px;
        margin: 100px auto;
        background-color: #ddd;
        border-radius: 20px;
      }
      canvas {
        /* border: 1px solid #444; */
        /* margin: 0 auto; */
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <canvas id="canvas" width="400px" height="400px"
        >浏览器版本过低，请升级最新版本谷歌浏览器（只有低版本浏览器才会显示标签内的文字）</canvas
      >
    </div>
  </body>
  <script>
    //获取canvas画布
    var canvas = document.querySelector('#canvas');
    // //获取上下文
    var ctx = canvas.getContext('2d');
    //基础参数
    var w = 400; //时钟宽
    var h = 400; //时钟高
    var x = 0; //时钟中心坐标X
    var y = 0; //时钟中心坐标Y
    var r = 180; //时钟半径
    var r_hour = 60; //时针长度
    var r_minute = 120; //分针长度
    var r_second = 140; //秒针长度
    var r_text = 150; //定义表盘文字的半径
    var r_square = 170; //刻度
    var r_circle = 10; //表盘小圆点
    var deg = 2 * Math.PI; //定义基本的圆周

    //第一步：平移中心点
    ctx.translate(w / 2, h / 2);

    function clock() {
      //第二步：画圆盘和圆心
      drawCircle(x, y, r, '#fff');
      drawCircle(x, y, r_circle, '#000');
      //第三步：画表针
      // 获取当前时间
      var date = new Date();
      var hour = date.getHours() * (deg / 12) - deg / 4;
      var miunte = date.getMinutes() * (deg / 60) - deg / 4;
      var second = date.getSeconds() * (deg / 60) - deg / 4;
      console.log(hour, miunte, second);
      drawLine(
        0,
        0,
        r_hour * Math.cos(hour),
        r_hour * Math.sin(hour),
        '#000',
        10
      );
      drawLine(
        0,
        0,
        r_minute * Math.cos(miunte),
        r_minute * Math.sin(miunte),
        'gray',
        5
      );
      drawLine(
        0,
        0,
        r_minute * Math.cos(second),
        r_minute * Math.sin(second),
        'red',
        2
      );

      //第四步：画数字
      for (let i = 0; i < 12; i++) {
        /**计算圆周坐标
        x=x+r*cos()
        y=y+r*sin()
        **/
        var θ = ((Math.PI * 2) / 12) * i - Math.PI / 3;
        var x_text = r_text * Math.cos(θ);
        var y_text = r_text * Math.sin(θ);
        drawText(i + 1, x_text, y_text);
      }
      //第五步：画刻度
      for (let i = 0; i < 60; i++) {
        /**计算圆周坐标
        x=x+r*cos()
        y=y+r*sin()
        **/
        var θ = ((Math.PI * 2) / 60) * i;
        var x1 = r * Math.cos(θ);
        var y1 = r * Math.sin(θ);
        var x2 = r_square * Math.cos(θ);
        var y2 = r_square * Math.sin(θ);
        drawLine(x1, y1, x2, y2, '#999', 2);
        /**判断是否为整点 **/
        if (i % 5 === 0) {
          var x2 = (r_square - 3) * Math.cos(θ);
          var y2 = (r_square - 3) * Math.sin(θ);
          drawLine(x1, y1, x2, y2, '#aaa', 4);
        }
      }
    }
    clock();
    //让指针动起来
    setInterval(() => {
      clock();
    }, 1000);

    //封装画直线
    function drawLine(x1, y1, x2, y2, color, width) {
      //开启一条路径
      ctx.beginPath();
      //确定起始点
      ctx.moveTo(x1, y1);
      //到哪里结束
      ctx.lineTo(x2, y2);
      //设置颜色
      ctx.strokeStyle = color;
      //设置线宽
      ctx.lineWidth = width;
      //线段圆角
      ctx.lineCap = 'round';
      //着色（如果要设置颜色和线宽，务必在着色之前设置）
      ctx.stroke();
      //关闭路径
      ctx.closePath();
    }

    //封装画圆
    function drawCircle(x, y, r, color, text) {
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2, true);
      ctx.fillStyle = color;
      ctx.fill();
      //   ctx.strokeStyle = color;
      //   ctx.stroke();
    }
    //封装画文字
    function drawText(text, x, y) {
      ctx.font = '20px 宋体 bold';
      ctx.textBaseline = 'middle';
      ctx.textAlign = 'center';
      ctx.fillText(text, x, y);
    }
    //封装产生随机数
    function random_num(num) {
      return parseInt(Math.random() * num);
    }
    //生成rgb随机颜色
    function random_color() {
      var rgb =
        'rgb(' +
        Math.floor(Math.random() * 255) +
        ',' +
        Math.floor(Math.random() * 255) +
        ',' +
        Math.floor(Math.random() * 255) +
        ')';
      console.log(rgb);
      return rgb;
    }
  </script>
</html>