vue3 实现刮奖效果

要实现刮奖效果，可以使用 Vue3 中的 `<canvas>` 标签来绘制刮奖区域和遮罩层，然后通过监听用户的鼠标或手指移动事件来擦除遮罩层，从而实现刮奖效果。

下面是一个简单的实现示例：

<template>
  <div class="scratch-card">
    <canvas ref="canvas" class="scratch-card__canvas"></canvas>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from 'vue';

export default {
  name: 'ScratchCard',
  setup() {
    const canvasRef = ref(null);
    let ctx = null;
    let isDrawing = false;

    const handleStart = (e) => {
      isDrawing = true;
      ctx.beginPath();
      ctx.moveTo(e.clientX, e.clientY);
    };

    const handleMove = (e) => {
      if (isDrawing) {
        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
      }
    };

    const handleEnd = () => {
      isDrawing = false;
    };

    onMounted(() => {
      const canvas = canvasRef.value;
      ctx = canvas.getContext('2d');

      // 绘制刮奖区域
      ctx.fillStyle = '#888';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // 绘制遮罩层
      ctx.fillStyle = '#f00';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // 监听鼠标或手指移动事件
      canvas.addEventListener('mousedown', handleStart);
      canvas.addEventListener('mousemove', handleMove);
      canvas.addEventListener('mouseup', handleEnd);
      canvas.addEventListener('touchstart', handleStart);
      canvas.addEventListener('touchmove', handleMove);
      canvas.addEventListener('touchend', handleEnd);
    });

    onUnmounted(() => {
      const canvas = canvasRef.value;
      canvas.removeEventListener('mousedown', handleStart);
      canvas.removeEventListener('mousemove', handleMove);
      canvas.removeEventListener('mouseup', handleEnd);
      canvas.removeEventListener('touchstart', handleStart);
      canvas.removeEventListener('touchmove', handleMove);
      canvas.removeEventListener('touchend', handleEnd);
    });

    return {
      canvasRef,
    };
  },
};
</script>

<style scoped>
.scratch-card {
  position: relative;
  width: 300px;
  height: 200px;
}

.scratch-card__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

在这个示例中，我们使用 `<canvas>` 标签来创建一个刮奖区域，它的背景颜色是灰色的。然后，我们使用相同的大小和位置创建一个遮罩层，它的背景颜色是红色的。

在 `setup` 函数中，我们使用 `onMounted` 和 `onUnmounted` 生命周期钩子来监听鼠标或手指移动事件，并在事件处理程序中绘制用户的刮奖轨迹。我们还使用 `ref` 函数来创建一个引用，以便在模板中访问 `<canvas>` 元素。

最后，我们将组件的样式设置为相对定位，以便它的子元素（即 `<canvas>` 元素）可以使用绝对定位来覆盖它。