js实现刮刮卡

实现刮刮卡效果

使用HTML5 Canvas和JavaScript可以轻松实现刮刮卡效果。以下是实现步骤和代码示例：

HTML结构

创建基本的HTML结构，包含Canvas元素和结果显示区域：

<div class="scratch-card">
  <canvas id="scratchCanvas"></canvas>
  <div class="result">恭喜中奖！</div>
</div>

CSS样式

设置Canvas和结果区域的样式：

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

#scratchCanvas {
  position: absolute;
  top: 0;
  left: 0;
  background: #ccc;
  cursor: crosshair;
}

.result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ff0000;
  pointer-events: none;
}

JavaScript实现

const canvas = document.getElementById('scratchCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

// 设置Canvas尺寸
function initCanvas() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;

  // 绘制遮盖层
  ctx.fillStyle = '#cccccc';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'destination-out';
}

// 事件监听
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;

  e.preventDefault();

  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();

  checkScratchCompletion();
}

function stopDrawing() {
  isDrawing = false;
}

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

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

  const transparentRatio = transparentCount / (pixels.length / 4);
  if (transparentRatio > 0.6) {
    canvas.style.opacity = '0';
  }
}

// 初始化
window.addEventListener('load', initCanvas);
window.addEventListener('resize', initCanvas);

功能扩展

可以添加更多功能增强用户体验：

// 重置刮刮卡
function resetScratchCard() {
  canvas.style.opacity = '1';
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = '#cccccc';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'destination-out';
}

// 添加奖品随机生成
const prizes = ['谢谢参与', '10元优惠券', '50元现金', '神秘大奖'];
document.querySelector('.result').textContent = prizes[Math.floor(Math.random() * prizes.length)];

移动端适配

确保在移动设备上也能正常使用：

// 防止触摸事件导致页面滚动
document.body.addEventListener('touchmove', function(e) {
  if (isDrawing) {
    e.preventDefault();
  }
}, { passive: false });

性能优化

对于较大的刮刮卡区域，可以优化检测逻辑：

function checkScratchCompletion() {
  const step = 10; // 检测步长
  let transparentCount = 0;
  let total = 0;

  for (let x = 0; x < canvas.width; x += step) {
    for (let y = 0; y < canvas.height; y += step) {
      total++;
      const pixel = ctx.getImageData(x, y, 1, 1).data;
      if (pixel[3] === 0) {
        transparentCount++;
      }
    }
  }

  if (transparentCount / total > 0.6) {
    canvas.style.opacity = '0';
  }
}

以上代码实现了一个完整的刮刮卡效果，支持鼠标和触摸操作，当刮开面积超过60%时会显示底层结果。可以根据需要调整Canvas大小、刮擦半径和完成阈值等参数。