微信小程序 小程序 canvas画一个动态时钟

接上两期，利用小程序canvas制作一个动态表盘。
[post cid=”63″ /]
[post cid=”65″ /]
2023-11-21T14:16:58.png

js部分：

const app = getApp()

Page({
  data: {

  },
  onLoad() {
    this.watchcan();
    //每秒执行一次
    setInterval(this.watchcan, 1000)
  },
  watchcan: function name(params) {
    //获取当前时间
    const now = new Date()
    const year = now.getFullYear();
    const month = ('0' + (now.getMonth() + 1)).slice(-2);
    const day = ('0' + now.getDate()).slice(-2);
    const hours = ('0' + now.getHours()).slice(-2);
    const minutes = ('0' + now.getMinutes()).slice(-2);
    const seconds = ('0' + now.getSeconds()).slice(-2);
    console.log(hours,minutes,seconds);
    //画表盘
    wx.createSelectorQuery()
      .select('#myCanvas') // 在 WXML 中填入的 id
      .fields({ node: true, size: true })
      .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)
        // 清空画布
        ctx.clearRect(0, 0, width, height)
        // 绘制红色正方形
        //3.绘制

        ctx.arc(100, 100, 100, 0, 2 * Math.PI);//arc 的意思是“弧”
        ctx.fillStyle = "white";//设置白色
        ctx.fill();//开始填充
        ctx.strokeStyle = "black";//将线条颜色设置为黑色
        ctx.stroke();//stroke() 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
        //画表盘
        //表盘3小时
        for (var i = 0; i < 12; i++) {
          ctx.save();
          ctx.translate(100, 100);
          ctx.beginPath();
          ctx.rotate(i * 90 * Math.PI / 180)
          ctx.strokeStyle = "black";
          ctx.lineWidth = 3;
          ctx.moveTo(0, -100);
          ctx.lineTo(0, -85);
          ctx.stroke();
          ctx.closePath();
          ctx.restore();
        }
        for (var i = 0; i < 12; i++) {
          ctx.save();
          ctx.translate(100, 100);
          ctx.beginPath();
          ctx.rotate(i * 30 * Math.PI / 180)
          ctx.strokeStyle = "black";
          ctx.lineWidth = 2;
          ctx.moveTo(0, -100);
          ctx.lineTo(0, -90);
          ctx.stroke();
          ctx.closePath();
          ctx.restore();
        }
        //时针
        ctx.save();
        ctx.translate(100, 100);
        ctx.beginPath();
        ctx.rotate(hours * 30 * Math.PI / 180);
        ctx.strokeStyle = "red";
        ctx.lineWidth = 3;
        ctx.moveTo(0, -30);
        ctx.lineTo(0, 0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        //分针
        ctx.save();
        ctx.translate(100, 100);
        ctx.beginPath();
        ctx.rotate(minutes * 6 * Math.PI / 180);
        ctx.strokeStyle = "red";
        ctx.lineWidth = 2.5;
        ctx.moveTo(0, -40);
        ctx.lineTo(0, 0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        //秒
        ctx.save();
        ctx.translate(100, 100);
        ctx.beginPath();
        ctx.rotate(seconds * 6 * Math.PI / 180);
        ctx.strokeStyle = "red";
        ctx.lineWidth = 2;
        ctx.moveTo(0, -60);
        ctx.lineTo(0, 10);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      })
  }

})

wxml部分：

<view class="canvas_clock"> 
  <canvas id="myCanvas" type="2d" style="border: 0 solid; width: 200px; height: 200px;" />
  </view>