<!-- 刮刮乐-->

  <view class="scratch-card">

    <!-- 添加积分提示 -->

    <view class="notice">

      每次抽奖将消耗<span class="expend">{{obts.needpoint}}积分</span>，祝您好运！

    </view>

   <canvas id="myCanvas" canvas-id="canvas" style="display:block;height:75%;width:92%;top:12%;left:4%;position:relative;"  bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd"/>

    <!-- 其他元素如背景图片等 -->

     <view class="container">

     <text class="prizeText">{{prizeText}}</text>

     </view>

  </view>initCanvas() {

        console.log('初始化画布');

        const systemInfo = wx.getSystemInfoSync(); // 获取系统信息

        this.canvasWidth = systemInfo.windowWidth; // 根据实际窗口宽度设置

        this.canvasHeight = systemInfo.windowHeight; // 根据实际窗口高度设置（或自定义）

       console.log('窗口宽度',systemInfo.windowWidth);

       console.log('窗口高度',systemInfo.windowHeight);

        this.ctx = wx.createCanvasContext('canvas', this);

        if (!this.ctx) {

            console.error("Canvas 上下文创建失败");

            return;

        }

        console.log('Canvas 上下文:', this.ctx);

        // 设置初始背景色

        this.ctx.setFillStyle('#ADADAD');

        this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

        console.log('填充矩形完成');

        // 文本绘制循环

        for (let i = 0; i < 20; i++) {

            this.ctx.rotate((-45 * Math.PI) / 180);

            this.ctx.font = "16px Arial";

            this.ctx.fillStyle = "#EEEFEF";

            this.ctx.fillText('刮一刮,有惊喜 刮一刮,有惊喜 刮一刮,有惊喜 刮一刮,有惊喜', -200, i * 60);

            this.ctx.rotate((45 * Math.PI) / 180);

            console.log(`文本绘制循环 ${i} 完成`);

        }

        setTimeout(() => {

            this.ctx.draw(true);     

            console.log('draw 方法调用完成');

        }, 0);

    }模拟器里画布的样式都是在，效果也能实现，但是在真机中效果就没有了，但是能在控制台中定位位置，而是没有效果