多彩背景，无缝衔接：一键更换图像背景

2023-08-02 05:38:16

用 Canvas 神奇变色，让你的创意尽情挥洒！

想象一下，你有一张画布，可以根据你的心意随意填色。只要轻轻一点，就能让整幅画瞬间换新装，仿佛施了魔法一般！现在，借助 Canvas 的强大功能，这个神奇的想象就变成了现实。

1. 绘图与捕捉坐标

首先，我们来准备一块虚拟画布，即 Canvas 元素。在 JavaScript 的陪伴下，你可以挥洒自如，使用各种图形和色彩尽情作画。

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 100, 100);

接下来，我们需要知道用户点击画布的坐标。当鼠标指针在画布上翩翩起舞时，这些坐标就像精准的导航仪，引导着我们的替换之旅。

canvas.addEventListener('click', (event) => {
  const x = event.clientX;
  const y = event.clientY;
});

2. 读取颜色与替换

有了坐标，我们就可以深入画布的像素世界，读取鼠标点击处的颜色。接着，我们赋予它全新的使命，将它换成你喜爱的色彩。

const color = ctx.getImageData(x, y, 1, 1).data;
const r = color[0];
const g = color[1];
const b = color[2];
const newColor = 'red';

然后，我们逐个像素地遍历整个画布。每当发现一个像素的颜色与鼠标点击处相近，就将其替换为新的色彩。

for (let i = 0; i < canvas.width; i++) {
  for (let j = 0; j < canvas.height; j++) {
    const pixelColor = ctx.getImageData(i, j, 1, 1).data;
    if (Math.abs(pixelColor[0] - r) < 10 && Math.abs(pixelColor[1] - g) < 10 && Math.abs(pixelColor[2] - b) < 10) {
      ctx.fillStyle = newColor;
      ctx.fillRect(i, j, 1, 1);
    }
  }
}