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);
    };

我需要从画布中删除（替换）img2。什么是最佳方式？

Answer 1

我想也许你误解了Canvas是什么。

画布本质上是沿“X”轴和“Y”轴的2维像素网格。您可以使用API在该画布上绘制像素，因此在绘制图像时，您基本上是将构成该图像的像素绘制到画布上。没有方法可以让你删除一个图像的原因是因为Canvas首先不知道那里有一个图像，它只是看到像素。

这与HTML DOM（文档对象模型）不同，HTML DOM（文档对象模型）中的所有内容都是HTML元素，或者您可以与之交互的实际“事物”，将脚本事件连接到等等。这与您绘制的内容不同到画布上。当在画布上绘制一个“东西”时，那个东西不会成为你可以瞄准或挂钩的东西，它只是像素。要获得“事物”，您需要以某种方式表示您的“事物”，例如JavaScript对象，并在某处维护这些JS对象的集合。这个Canvas游戏如何运作。 Canvas缺乏类似DOM的结构使得渲染速度非常快，但是实现可以轻松挂钩并与之交互，删除等的UI元素可能会很麻烦。为此您可能需要尝试SVG。

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

Answer 2

当图像消失时，您不希望画布显示什么。如果您希望它是透明的，您可以获取图像数据并用透明像素填充它：

var img = ctx.createImageData(w, h);
for (var i = img.data.length; --i >= 0; )
  img.data[i] = 0;
ctx.putImageData(img, 100, 100);

其中“w”和“h”是原始图像的宽度和高度。

编辑 - 如果你只想要另一张图片，为什么不把它放在那里呢？它将覆盖画布上的任何像素。

Answer 3

如果“Sunday Ironfoot”所说的是正确的，那么删除图像的最佳方法是从头开始再次绘制图像。为此，您需要拥有一组图像并仅绘制您使用的图像。例如，

function EmptyClass{};
var img=new Array();
img[0]=new EmptyClass;
img[0].i=new Image();
img[0].src="yourfile1.jpg";
img[0].enabled=true;

img[1]=new EmptyClass;
img[1].i=new Image();
img[1].src="yourfile2.jpg";
img[1].enabled=false;// <-------- not enabled, should not be drawn equivalent to removing


img[2]=new EmptyClass;
img[2].i=new Image();
img[2].src="yourfile3.jpg";
img[2].enabled=true;

for(var i=0;i<3;i++){
if(img[i].enabled)ctx.drawImage(img[i], 100, 100);
}

P.S。我正在为javascript画布创建一个引擎。将在一周内发布

和平

Answer 4

您可以使用clearRect（）函数清除图像区域。然后清除整个上下文，您可以使用以下方法清除图像区域：

ctx.clearRect(xcoordinate_of_img1,ycoordinate_of_img1,xcoordinate_of_img1 + img1.width ,ycoord_of_img1 +img1.height );

Answer 5

与自己绘制的东西不同，如果你'替换'画布上的图像，旧图像仍然存在。

Canvas c2;
...
        if (null != Image2) {
            var ctx = c2.getContext("2d");
            ctx.clearRect(0, 0, c2.width, c2.height);
        }

Answer 6

你可以叠加画布对象（我想在问之前我应该尝试，你可以让我一个人懒惰）。我想我有兴趣将一个canvas元素作为背景，然后另一个用于弹出和移出视图的图层对象。如果一个图像被删除或移动，则可能需要重新绘制每个图像。我会玩，看看我能找到什么。

Answer 7

您可以使用其他 globalCompositeOperation

通过再次绘制同一图像来擦除图像

ctx.globalCompositeOperation ="xor"
ctx.drawImage(img2, 100, 100);

请参见https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

在HTML5中从画布中删除图像

7 个答案: