用`canvas`实现刮刮乐效果的实战指南

2023-10-30 22:28:00

使用 Canvas 实现引人入胜的刮刮乐效果

创建互动式刮刮卡体验

在数字世界中重现童年怀旧的刮刮乐，使用 Canvas 为您的网站或应用程序增添一抹乐趣和互动性。Canvas 强大的绘图功能使我们能够轻松创建逼真的刮刮乐效果，让用户可以在虚拟空间中揭示隐藏的信息。

构建基础结构

首先，建立一个包含两个 div 元素的基本布局。第一个 div 用于显示底层内容，而第二个 div 则覆盖在上面，容纳 Canvas 元素。这将确保 Canvas 元素位于所有其他元素之上。

<div id="container">
  <div id="content">
    <h1>刮刮乐</h1>
    <p>刮开下面的区域，看看你能得到什么。</p>
  </div>
  <canvas id="canvas"></canvas>
</div>

创建画布

接下来，使用 JavaScript 创建一个 Canvas 元素并将其添加到容器 div 中。设置 Canvas 的尺寸以适应所需的空间。

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 300;
document.getElementById('container').appendChild(canvas);

设置样式

为 Canvas 元素应用样式，使其占据父元素的整个空间，并绝对定位在上面。

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

绘制刮刮卡

使用 Canvas 的强大绘图 API，开始绘制刮刮卡。创建 Canvas 绘图上下文，并使用它在 Canvas 上绘制一个灰色矩形作为刮刮卡的表面。

const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0, canvas.width, canvas.height);

加载刮开内容

为了给刮刮卡添加惊喜，需要加载一张图像。创建 Image 对象，设置 src 属性为要显示的图像的路径，并在图像加载后将其绘制到 Canvas 上。

const image = new Image();
image.onload = () => {
  ctx.drawImage(image, 0, 0);
};
image.src = 'image.png';

实现刮开功能

要实现刮开功能，我们需要监听鼠标在 Canvas 上的移动。为此，添加事件侦听器，并在鼠标移动时触发一个名为 scratch() 的函数。

canvas.addEventListener('mousemove', scratch);

function scratch(e) {
  // 计算鼠标相对于 Canvas 的位置
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  // 设置合成模式以擦除图像
  ctx.globalCompositeOperation = 'destination-out';
  
  // 使用黑色半透明圆形在鼠标位置刮开
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
}