javascript - 在 HTML5 中从 Canvas 中删除图像

Question

有一个示例，它加载了 2 张图片:

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    var img1 = new Image();
    img.src = "/path/to/image/img1.png";
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
    };

    var img2 = new Image();
    img2.src = "/path/to/image/img2.png";
    img2.onload = function() {
      ctx.drawImage(img2, 100, 100);
    };

我需要从 Canvas 中删除(替换)img2。 最好的方法是什么？

Answer 1

我想您可能误解了什么是 Canvas。

Canvas 本质上是一个沿“X”轴和“Y”轴的二维像素网格。您使用 API 在该 Canvas 上绘制像素，因此当您绘制图像时，您基本上是在 Canvas 上绘制构成该图像的像素。之所以没有让您只删除图像的方法，是因为 Canvas 一开始并不知道那里有图像，它只看到像素。

这与 HTML DOM(文档对象模型)不同，在 HTML DOM 中，一切都是 HTML 元素，或者您可以与之交互的实际“事物”，连接脚本事件等。您绘制的东西不是这种情况到 Canvas 上。当在 Canvas 上绘制一个“东西”时，那个东西不会变成你可以定位或 Hook 的东西，它只是像素。要获得“事物”，您需要以某种方式(例如 JavaScript 对象)表示您的“事物”，并在某处维护这些 JS 对象的集合。这就是 Canvas 游戏的工作原理。 Canvas 缺少类似 DOM 的结构使得渲染速度非常快，但对于实现 UI 元素来说可能会很痛苦，您可以轻松地 Hook 并与之交互、删除等。为此，您可能想尝试 SVG。

要回答您的问题，只需使用与原始图像相同的 X/Y 坐标和尺寸在 Canvas 上绘制一个矩形来覆盖您的图像，或者尝试 Pointy 的解决方案。 “掩盖”可能是错误的术语，因为您实际上是在替换像素(Canvas 中没有图层)。