h5 实现刮刮卡

实现刮刮卡效果的H5方法

使用Canvas绘制刮刮卡效果

在HTML中创建一个Canvas元素，设置合适的宽度和高度。通过JavaScript监听触摸或鼠标事件，实现刮开效果。

<canvas id="scratchCard" width="300" height="150"></canvas>

const canvas = document.getElementById('scratchCard');
const ctx = canvas.getContext('2d');

// 初始化刮刮卡涂层
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-out';

// 设置刮开效果
let isDrawing = false;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    draw(e);
}

function draw(e) {
    if (!isDrawing) return;
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX || e.touches[0].clientX) - rect.left;
    const y = (e.clientY || e.touches[0].clientY) - rect.top;

    ctx.beginPath();
    ctx.arc(x, y, 15, 0, Math.PI * 2);
    ctx.fill();
}

function stopDrawing() {
    isDrawing = false;
}

设置刮刮卡背景内容

在Canvas下方放置奖品信息或图片，当用户刮开涂层时显示底层内容。

<div id="prizeContent" style="position: absolute; top: 0; left: 0; z-index: -1;">
    <p>恭喜获得：50元优惠券</p>
</div>

优化触摸体验

为移动设备添加适当的CSS样式，防止触摸时页面滚动。

#scratchCard {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

检测刮开面积

添加逻辑判断刮开面积比例，当达到阈值时自动清除全部涂层。

function checkScratchPercentage() {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data;
    let transparentPixels = 0;

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

    const percentage = (transparentPixels / (pixels.length / 4)) * 100;
    if (percentage > 60) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
}

// 在draw函数末尾调用
checkScratchPercentage();

添加视觉效果

为刮开动作添加粒子效果或声音反馈，增强用户体验。

function playScratchSound() {
    const audio = new Audio('scratch.mp3');
    audio.volume = 0.3;
    audio.play();
}

// 在draw函数中调用
playScratchSound();

响应式设计

确保刮刮卡在不同设备上都能正常显示和使用。

#scratchCard {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

通过以上方法可以实现一个基本的H5刮刮卡效果，可根据具体需求调整涂层颜色、刮开灵敏度等参数。