Canvas指尖擦出图片原来图像，像素点游戏轻松实现

前端

2023-09-28 07:46:42

用Canvas实现神奇橡皮擦效果

想象一下：拥有一个橡皮擦，可以让你轻松擦除数字图像中的任何内容，露出底层的图像或画布。在过去的图像编辑中，这可能是一个梦想，但现在，借助神奇的Canvas，这已成为现实。

什么是Canvas？

Canvas是一个HTML5元素，允许你在浏览器中创建2D和3D图形。它的强大功能之一是能够利用图层，就像在实际绘图软件中一样。通过这种图层系统，我们可以创建多层图像，并对特定层进行操作，而不影响其他层。

Canvas橡皮擦的秘密

实现橡皮擦效果的关键在于清除画布上特定区域的像素。Canvas提供了两个有效的方法来实现这一目标：

clearRect()方法： 允许你指定一个矩形区域，并清除其中的所有像素。
globalCompositeOperation属性： 用于设置画布上的合成操作，可以将“destination-out”值分配给该属性，以实现橡皮擦效果。

使用clearRect()方法

clearRect()方法的语法很简单：

clearRect(x, y, width, height);

x和y定义要清除的矩形左上角的坐标。
width和height指定矩形的宽和高。

要使用此方法实现橡皮擦效果，只需不断更新矩形位置，以匹配鼠标指针或手指的当前位置即可。

// 创建一个画布上下文
var context = canvas.getContext('2d');

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
  // 获取鼠标相对于画布的位置
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  // 清除鼠标所在的矩形区域
  context.clearRect(x, y, 10, 10);
});

使用globalCompositeOperation属性

另一种实现橡皮擦效果的方法是使用globalCompositeOperation属性：

context.globalCompositeOperation = 'destination-out';

将此属性设置为“destination-out”后，任何绘制在画布上的新内容都会清除底层内容。使用此方法的优点是，它不需要不断更新矩形位置。

// 创建一个画布上下文
var context = canvas.getContext('2d');

// 将globalCompositeOperation属性设置为'destination-out'
context.globalCompositeOperation = 'destination-out';

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(e) {
  // 获取鼠标相对于画布的位置
  var x = e.clientX - canvas.offsetLeft;
  var y = e.clientY - canvas.offsetTop;

  // 绘制一个覆盖鼠标位置的矩形
  context.fillRect(x, y, 10, 10);
});

橡皮擦效果的应用

Canvas的橡皮擦效果在图像编辑、涂鸦和游戏等各种应用中大放异彩：

图像编辑： 轻松去除瑕疵、调整亮度和对比度。
涂鸦： 创建各种形状和图案。
游戏： 擦除隐藏的物体、解开谜题。

示例：像素点大作战

为了展示Canvas橡皮擦的强大功能，让我们创建一个简单的游戏：像素点大作战！

在这个游戏中，玩家控制一个小方块，任务是吃掉屏幕上的所有像素点。当所有像素点都被吃掉时，游戏结束。

// 创建一个画布和上下文
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// 创建小方块
var square = {
  x: 100,
  y: 100,
  width: 10,
  height: 10
};

// 创建像素点
var pixels = [];
for (var i = 0; i < 100; i++) {
  pixels.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height
  });
}

// 监听键盘事件
document.addEventListener('keydown', function(e) {
  // 上
  if (e.keyCode === 38) {
    square.y -= 10;
  }

  // 下
  if (e.keyCode === 40) {
    square.y += 10;
  }

  // 左
  if (e.keyCode === 37) {
    square.x -= 10;
  }

  // 右
  if (e.keyCode === 39) {
    square.x += 10;
  }
});

// 游戏循环
function gameLoop() {
  // 清除画布
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制小方块
  context.fillStyle = 'red';
  context.fillRect(square.x, square.y, square.width, square.height);

  // 绘制像素点
  context.fillStyle = 'black';
  for (var i = 0; i < pixels.length; i++) {
    context.fillRect(pixels[i].x, pixels[i].y, 1, 1);
  }

  // 检测碰撞
  for (var i = 0; i < pixels.length; i++) {
    if (square.x < pixels[i].x + 1 &&
        square.x + square.width > pixels[i].x &&
        square.y < pixels[i].y + 1 &&
        square.y + square.height > pixels[i].y) {
      // 碰撞了
      pixels.splice(i, 1);
    }
  }

  // 结束游戏
  if (pixels.length === 0) {
    alert('游戏结束！');
  }

  // 下一帧
  requestAnimationFrame(gameLoop);
}

// 启动游戏
gameLoop();