利用Canvas轻松实现手机端「擦一擦」效果

2023-12-07 23:36:39

在移动端，想要实现「擦一擦」的效果，可以使用 Canvas，一种强大的 JavaScript API，用于在网页上创建和操作位图。本文将详细介绍如何使用 Canvas 实现这种效果。

实现步骤：

1. 创建 Canvas 元素

const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

2. 设置背景图片

const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
  ctx.drawImage(img, 0, 0);
};
img.src = 'path/to/background.jpg';

3. 监听触屏事件

canvas.addEventListener('touchmove', (e) => {
  // 获取触摸点坐标
  const x = e.touches[0].clientX;
  const y = e.touches[0].clientY;
  
  // 设置擦除区域
  ctx.globalCompositeOperation = 'destination-out';
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, 2 * Math.PI);
  ctx.fill();
});

4. 完成
至此，「擦一擦」效果已实现。用户可以在移动端上按压屏幕移动，擦除模糊区域，露出清晰的背景图片。

示例代码：

const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
  ctx.drawImage(img, 0, 0);
};
img.src = 'path/to/background.jpg';

canvas.addEventListener('touchmove', (e) => {
  const x = e.touches[0].clientX;
  const y = e.touches[0].clientY;
  
  ctx.globalCompositeOperation = 'destination-out';
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, 2 * Math.PI);
  ctx.fill();
});

document.body.appendChild(canvas);