当前位置：首页 > VUE

vue 实现刮奖

2026-02-20 03:00:24VUE

Vue 实现刮奖效果

刮奖效果可以通过 Canvas 和 Vue 结合实现。以下是具体实现步骤：

创建 Vue 组件

新建一个 Vue 组件，例如 ScratchCard.vue，包含模板、脚本和样式部分。

vue 实现刮奖

<template>
  <div class="scratch-card">
    <canvas 
      ref="canvas" 
      @mousedown="startScratching" 
      @mousemove="scratch" 
      @mouseup="stopScratching"
      @touchstart="startScratching"
      @touchmove="scratch"
      @touchend="stopScratching"
    ></canvas>
    <div class="prize">{{ prizeText }}</div>
  </div>
</template>

初始化 Canvas

在 mounted 钩子中初始化 Canvas，设置画布大小和初始状态。

mounted() {
  this.initCanvas();
},
methods: {
  initCanvas() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    canvas.width = 300;
    canvas.height = 150;

    // 绘制遮罩层
    ctx.fillStyle = '#ccc';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = '20px Arial';
    ctx.fillStyle = '#000';
    ctx.fillText('刮开涂层', canvas.width / 2 - 50, canvas.height / 2);
  }
}

实现刮奖逻辑

添加刮奖的交互逻辑，包括鼠标/触摸事件处理和刮除效果。

vue 实现刮奖

data() {
  return {
    isScratching: false,
    prizeText: '一等奖',
    lastX: 0,
    lastY: 0
  };
},
methods: {
  startScratching(e) {
    this.isScratching = true;
    const canvas = this.$refs.canvas;
    const rect = canvas.getBoundingClientRect();
    this.lastX = e.clientX - rect.left;
    this.lastY = e.clientY - rect.top;
  },

  scratch(e) {
    if (!this.isScratching) return;
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(x, y, 15, 0, Math.PI * 2);
    ctx.fill();

    this.lastX = x;
    this.lastY = y;
  },

  stopScratching() {
    this.isScratching = false;
  }
}

样式调整

添加样式以确保 Canvas 和奖品文本正确显示。

.scratch-card {
  position: relative;
  width: 300px;
  height: 150px;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.prize {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ff0000;
  background: #fff;
}

使用组件

在父组件中引入并使用 ScratchCard 组件。

<template>
  <div>
    <ScratchCard />
  </div>
</template>

<script>
import ScratchCard from './ScratchCard.vue';

export default {
  components: {
    ScratchCard
  }
};
</script>

优化与扩展

响应式调整：监听窗口大小变化，动态调整 Canvas 尺寸。
奖品配置：通过 props 传递奖品信息，实现动态奖品显示。
刮开比例检测：计算已刮开区域比例，触发奖品展示逻辑。

// 检测刮开比例
checkScratchedRatio() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  let transparentPixels = 0;

  for (let i = 0; i < imageData.data.length; i += 4) {
    if (imageData.data[i + 3] === 0) {
      transparentPixels++;
    }
  }

  const ratio = transparentPixels / (canvas.width * canvas.height);
  return ratio;
}

通过以上步骤，可以实现一个基础的 Vue 刮奖组件，支持鼠标和触摸操作，并可扩展更多功能。

标签: vue