Javascript 在 HTML5 中从画布中删除图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3458244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing an image from a canvas in HTML5
提问by Alex Ivasyuv
there's an example, which loads 2 images:
有一个例子，它加载 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);
};
I need to remove(replace) img2 from canvas. What is the bestway to do it?
我需要从画布中删除（替换）img2。什么是最好的做呢？
采纳答案by Pointy
It's not clear what you want the canvas to show when the image is gone. If you want it to be transparent, you could get the image data and fill it with transparent pixels:
不清楚当图像消失时您希望画布显示什么。如果你希望它是透明的，你可以获取图像数据并用透明像素填充它：
var img = ctx.createImageData(w, h);
for (var i = img.data.length; --i >= 0; )
img.data[i] = 0;
ctx.putImageData(img, 100, 100);
where "w" and "h" would be the width and height of your original image.
其中“w”和“h”将是原始图像的宽度和高度。
edit— if you just want another image there, why not just put one there? It will overwrite whatever pixels are there on the canvas.
编辑——如果你只想要另一张图片，为什么不放一张呢？它会覆盖画布上的任何像素。
回答by Sunday Ironfoot
I think maybe you misunderstand what a Canvas is.
我想你可能误解了 Canvas 是什么。
A canvas is essentially a 2 dimensional grid of pixels along an 'X' axis and a 'Y' axis. You use the API to draw pixels onto that canvas, so when you draw an image you're basically drawing the pixels that make up that image onto your canvas. The reason there is NO method that lets you just remove an image, is because the Canvas doesn't know there's an image there in the first place, it just see pixels.
画布本质上是沿“X”轴和“Y”轴的二维像素网格。您使用 API 在画布上绘制像素，因此当您绘制图像时，您基本上是在画布上绘制构成该图像的像素。没有方法可以让您只删除图像的原因是因为 Canvas 首先不知道那里有图像，它只看到像素。
This is unlike the HTML DOM (Document Object Model) where everything is a HTML element, or an actual 'thing' you can interact with, hook-up script events to etc. this isn't the case with stuff you draw onto a Canvas. When draw a 'thing' onto a Canvas, that thing doesn't become something you can target or hook into, it's just pixels. To get a 'thing' you need to represent your 'thing' in some way such as a JavaScript object, and maintain a collection of these JS objects somewhere. This how how Canvas games work. This lack of a DOM-like structure for Canvas makes rendering very fast, but can be a pain for implementing UI elements that you can easily hook into and interact with, remove etc. For that you might want to try SVG.
这与 HTML DOM（文档对象模型）不同，在 HTML DOM（文档对象模型）中，一切都是 HTML 元素，或者是您可以与之交互的实际“事物”、将脚本事件连接到等。这与您在 Canvas 上绘制的内容不同. 当在画布上绘制一个“东西”时，那个东西不会成为你可以定位或挂钩的东西，它只是像素。要获得“事物”，您需要以某种方式（例如 JavaScript 对象）表示您的“事物”，并在某处维护这些 JS 对象的集合。这就是 Canvas 游戏的工作方式。Canvas 缺乏类似 DOM 的结构使得渲染速度非常快，但实现 UI 元素可能会很痛苦，您可以轻松地连接和交互、删除等。为此，您可能想尝试 SVG。
To answer your question, simply paint a rectangle onto your Canvas that covers up your image by using the same X/Y coords and dimensions you used for your original image, or try Pointy's solution. 'Cover-up' is probably the wrong terminology, since you're actually replacing the pixels (there are no layers in Canvas).
要回答您的问题，只需使用与原始图像相同的 X/Y 坐标和尺寸，在 Canvas 上绘制一个矩形来覆盖您的图像，或者尝试 Pointy 的解决方案。“Cover-up”可能是错误的术语，因为您实际上是在替换像素（Canvas 中没有图层）。
回答by user1484782
You can use clearRect() function to clear the image area.Rather then clearing whole context you can clear only the image area using this:
您可以使用 clearRect() 函数清除图像区域。而不是清除整个上下文，您只能使用以下方法清除图像区域：
ctx.clearRect(xcoordinate_of_img1,ycoordinate_of_img1,xcoordinate_of_img1 + img1.width ,ycoord_of_img1 +img1.height );
回答by Akshaya Shanbhogue
If what "Sunday Ironfoot" said is right, then the best way to remove an image is by drawing the images once again from scratch. For this, you need to have an array of images and draw only the ones you use. For example,
如果“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. I am creating an engine for javascript canvas. Will post it within a week
PS我正在为javascript画布创建一个引擎。将在一周内发布
Peace
和平
回答by SingleStepper
Unlike drawing things yourself, if you 'replace' THE image on a canvas, the old one is still there.
不像自己画东西，如果你“替换”画布上的图像，旧的仍然存在。
Canvas c2;
...
if (null != Image2) {
var ctx = c2.getContext("2d");
ctx.clearRect(0, 0, c2.width, c2.height);
}
回答by David Lilljegren
You can erase an image by drawing the same image again, using a different globalCompositeOperation
您可以通过使用不同的globalCompositeOperation再次绘制相同的图像来擦除图像
ctx.globalCompositeOperation ="xor"
ctx.drawImage(img2, 100, 100);
See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
请参阅https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
回答by infocyde
Can you overlay canvas objects (I guess I should try before asking, you can -1 one me for being lazy). I guess I'd be interested in have one canvas element as a background, and then another for a layer objects that pop in and out of view. Might be a little more efficient then having to redraw every image if one gets deleted or moved. I'll play around and see what I can find.
你能覆盖画布对象吗（我想我应该在问之前先试一下，你可以 -1 我因为懒惰）。我想我会对有一个画布元素作为背景感兴趣，然后另一个用于弹出和弹出视图的图层对象。如果一个图像被删除或移动，可能会比重新绘制每个图像更有效。我会到处玩，看看我能找到什么。
