这是在index.js中的部分代码，点击按钮后调用了ClockProcessing函数。模拟器中各个机型都可以，基础库也换过几个，都可以运行。但是在真机中运行调试和预览时都不显示Convas的内容。其他内容正常，无报错。微信开发者工具也回退了版本到Stable 1.06.2209190，还是不行。请问各位这是什么原因？

ClockProcessing: function () {
    var DrawingDegree = ((this.data.RemainedTime / this.data.SettedTime) * 2 * Math.PI).toFixed(2);
    wx.createSelectorQuery()
      .select('#Progress')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const width = res[0].width
        const height = res[0].height
        //console.log(width);
        //console.log(height);
        // 初始化画布大小
        const WindowInfo = wx.getWindowInfo()
        const dpr = WindowInfo.pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)



        ctx.translate(width / 2, height / 2); //重置原点坐标
        ctx.rotate(1.5 * Math.PI); //重置笛卡尔坐标角度
        //我真傻，真的。我单知道变换坐标系就可以方便的使用坐标运算。但不知道x和y倒转了。
        //此时，向上为X正方向，向右为Y正方向


        /////////////////// 灰色背景圆
        ctx.beginPath();
        ctx.translate(ctx.width, ctx.height);
        ctx.arc(0, 0, width / 2 - 10, 0, Math.PI * 2);
        ctx.lineWidth = 10;
        var Gradient_Grey = ctx.createLinearGradient(0, 10, width / 2, height);
        Gradient_Grey.addColorStop("0", "#f0f0f0");
        Gradient_Grey.addColorStop("1.0", "#f1f1f1");
        ctx.strokeStyle = Gradient_Grey;
        ctx.stroke();
        ctx.closePath();
        ////////////////////灰色背景圆


        ////////////////////动态圆


        ctx.beginPath();
        ctx.arc(0, 0, width / 2 - 10, 0, DrawingDegree);
        ctx.lineWidth = 10;
        var Gradient_Green = ctx.createLinearGradient(0, 10, width / 2, height);
        Gradient_Green.addColorStop("0", "#a3da33");
        Gradient_Green.addColorStop("1.0", "#56B37F");
        ctx.strokeStyle = Gradient_Green;
        ctx.stroke();
        ctx.closePath();


        ctx.beginPath();
        ctx.arc(width / 2 - 10, 0, 5, 0, Math.PI * 2);
        ctx.fillStyle = Gradient_Green;
        ctx.fill();
        ctx.closePath();



        ////////////////////动态圆


        /////////////////小纽扣
        ctx.beginPath();
        let Position_x = Math.round(Math.sin(DrawingDegree) * (width / 2 - 10));
        let Position_y = Math.round(Math.cos(DrawingDegree) * (width / 2 - 10));
        //console.log("X:" + Position_x);
        //console.log("Y:" + Position_y);
        //console.log(DrawingDegree);
        ctx.arc(Position_y, Position_x, 12, 0, Math.PI * 2);
        ctx.fillStyle = "#ffffff";
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowColor = 'rgba(86,179,127,0.5)';
        ctx.shadowBlur = 10;
        ctx.fill();
        ctx.closePath();


        ctx.beginPath();
        ctx.arc(Position_y, Position_x, 6, 0, Math.PI * 2);
        ctx.fillStyle = "#56B37F";
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.shadowColor = 'rgba(86,179,127,0.5)';
        ctx.shadowBlur = 14;
        ctx.fill();
        ctx.closePath();
        /////////////////小纽扣



        ////////////
        //ctx.save();
        ctx.rotate(Math.PI / 2);
        ctx.font = '52px 微软雅黑';
        ctx.fillStyle = '#000'
        ctx.fillText(this.data.TimeStr, -ctx.measureText(this.data.TimeStr).width * 0.5, 10);


        ctx.font = '12px 微软雅黑';
        ctx.fillStyle = '#808A87';
        ctx.fillText("剩余时间", -ctx.measureText("剩余时间").width * 0.5, 36);
        ////////////
        /*
        ctx.beginPath();
        ctx.fillStyle = 'rgb(200, 0, 0,0.5)';
        ctx.fillRect(0, 0, 251, -16);
        ctx.closePath();
        */
      })
  },

同时贴一下电脑和手机的截图：