在HTML5中从画布中删除图像

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元素,或者您可以与之交互的实际"事物",将脚本事件连接到等等.这与您在Canvas上绘制的内容不同.当在画布上绘制一个"东西"时,那个东西不会成为你可以瞄准或挂钩的东西,它只是像素.要获得"事物",您需要以某种方式表示您的"事物",例如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

您可以使用 clearRect() 函数清除图像区域。而不是清除整个上下文，您只能使用以下方法清除图像区域：

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