js实现刮刮卡

实现刮刮卡效果

使用HTML5 Canvas和JavaScript可以实现刮刮卡效果。以下是一个完整的实现方法：

HTML结构

<canvas id="scratchCanvas" width="300" height="150"></canvas>
<div id="result">恭喜中奖！</div>

CSS样式

#scratchCanvas {
  border: 1px solid #000;
  cursor: crosshair;
  position: relative;
}

#result {
  position: absolute;
  top: 50px;
  left: 50px;
  font-size: 24px;
  color: red;
  display: none;
}

JavaScript代码

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

// 初始化画布
function initCanvas() {
  ctx.fillStyle = '#ccc';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.font = '20px Arial';
  ctx.fillStyle = '#000';
  ctx.fillText('刮开此处查看结果', 50, 80);
}

// 鼠标事件处理
let isDrawing = false;

canvas.addEventListener('mousedown', () => {
  isDrawing = true;
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;

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

  // 检查刮开面积
  checkScratchedArea();
});

// 触摸事件处理（移动端支持）
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  isDrawing = true;
});

canvas.addEventListener('touchend', () => {
  isDrawing = false;
});

canvas.addEventListener('touchmove', (e) => {
  if (!isDrawing) return;

  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  const touch = e.touches[0];
  const x = touch.clientX - rect.left;
  const y = touch.clientY - rect.top;

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

  checkScratchedArea();
});

// 检查刮开面积比例
function checkScratchedArea() {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imageData.data;
  let transparentPixels = 0;

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

  const scratchedRatio = transparentPixels / (canvas.width * canvas.height);

  if (scratchedRatio > 0.6) {
    result.style.display = 'block';
  }
}

// 初始化
initCanvas();

实现说明

1. 使用Canvas绘制刮刮卡覆盖层，默认显示灰色背景和提示文字
2. 监听鼠标或触摸事件，当用户刮动时清除对应区域的像素
3. 使用globalCompositeOperation设置为'destination-out'来实现擦除效果
4. 定期检查被刮开的面积比例，当超过阈值时显示结果
5. 添加了移动端触摸事件支持，使在手机和平板上也能使用

优化建议

1. 可以添加重置功能，让用户能重新刮卡
2. 可以预加载奖品图片或信息，提高用户体验
3. 调整刮开阈值（目前设置为60%）以适应不同需求
4. 添加动画效果，使刮卡过程更加流畅

兼容性说明

此实现使用了HTML5 Canvas特性，兼容所有现代浏览器。对于IE9及以下版本，可能需要添加兼容层或替代方案。