uniapp vue刮刮乐

### UniApp Vue 实现刮刮乐效果

#### HTML结构
在`<template>`标签内定义基础的HTML结构，创建一个用于显示刮奖区域的容器。

<view class="scratch-card">
    <canvas canvas-id="scratchCanvas"></canvas>
</view>

此部分构建了刮奖卡片的基础布局[^1]。

#### JavaScript逻辑初始化
通过`onReady()`生命周期钩子，在页面加载完成后获取画布上下文并设置初始状态。

export default {
  data() {
    return {
      ctx: null,
      scratchImage: '',
      maskColor: '#ccc',
      isScratchable: true,
      scratchCount: 0, // 刮奖次数计数器
      maxScratchTimes: 5 // 最大允许刮奖次数
    };
  },
  onReady() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#scratchCanvas').fields({ node: true, size: true }).exec((res) => {
        this.ctx = res[0].node.getContext('2d');
        this.initCanvas();
    });
  }
}

这段代码实现了组件数据属性声明以及画布环境准备的工作。

#### 初始化画布函数
编写`initCanvas()`方法来绘制背景图片和遮罩层。

methods: {
  initCanvas() {
    let that = this;
    wx.getImageInfo({
      src: '/static/images/your-prize-image.png', // 替换成实际路径
      success(res) {
          that.scratchImage = res.path;

          that.ctx.drawImage(that.scratchImage, 0, 0, that.width, that.height);

          // 绘制灰色覆盖层作为未刮开的状态
          that.ctx.fillStyle = that.maskColor;
          that.ctx.fillRect(0, 0, that.width, that.height);
      }
    })
  }
}

上述代码片段展示了如何利用微信小程序API加载图像资源，并将其渲染到画布上。

#### 处理触摸事件
为了使刮奖功能能够在移动设备上正常运作，需监听用户的触控操作。

// 添加touchstart/touchmove事件处理程序
this.$refs.canvasContainer.addEventListener('touchstart', (e) => { /* ... */ }, false);
this.$refs.canvasContainer.addEventListener('touchmove', (e) => { /* ... */ }, false);

当检测到手指接触屏幕时触发相应动作，比如清除特定位置上的颜色露出下方图案。

#### 动态更新UI界面
每当用户完成一次有效的刮除行为之后，应该及时刷新界面上的信息提示。

if (!this.isScratchable || ++this.scratchCount > this.maxScratchTimes){
  alert(`您已达到最大刮奖次数(${this.maxScratchTimes})`);
  this.isScratchable = false; // 禁用进一步交互
} else {
  // 更新剩余可刮次数文本或其他视觉反馈...
}

这里包含了对于超出限定范围后的响应措施——通知玩家并且阻止后续尝试继续刮卡的行为。