在画布上绘制多个图像，然后删除其中之一
[英]Draw multiple images to canvas and then remove one of them
问题描述
After getting a Canvas element and its context 
获得Canvas元素及其上下文之后
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
Let's say I drew 3 images on it. 假设我在上面画了3张图片。
context.drawImage(image,x,y,100,100);
context.drawImage(image,x+20,y+20,100,100);
context.drawImage(image,x+40,y+40,100,100); //image 3
How do I remove image 3 from the canvas keeping the other two? 如何从画布上删除图像3并保留其他两个图像？ Won't clearRect remove anything in the drawing area?! clearRect不会在绘图区域中删除任何内容吗？！ If not, why? 如果没有，为什么？
Thanks a lot. 非常感谢。
3 个解决方案
解决方案1
1 已采纳 2016-06-16 19:27:02
It does not a contain any separate element like we see in html when multiple element flow over another with different z-index. 它不包含任何单独的元素，就像我们在html中看到的那样，当多个元素在另一个具有不同z-index的元素上流动时。 Its just like a state. 它就像一个状态。 So it is like an array of pixel data (they call it ImageData). 因此，它就像一个像素数据数组（它们称为ImageData）。 You can capture a state. 您可以捕获状态。
Just a sample code: 只是一个示例代码：
<!DOCTYPE html>
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">
<table>
<tr>
<td>
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</td>
<td>
<p>Extra Canvas:</p>
<canvas id="myCanvas2" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</td>
</table>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
ctx.drawImage(img, 110, 40);
var c2 = document.getElementById("myCanvas2"); // will copy the sate here
c2.getContext("2d").putImageData(ctx.getImageData(0, 0, 240, 297), 0, 0);
ctx.drawImage(img, 30, 60);
}
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet Explorer 8 and earlier versions.</p>
I just modified the sample code of w3schools tryIt ( http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage ). 我刚刚修改了w3schools tryIt的示例代码（ http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage ）。
You can use ctx.save() to keep a restorable state while making changes using drawImage() . 您可以使用ctx.save()在使用drawImage()进行更改时保持可恢复状态。 And to restore to that very last saves state, you can use ctx.restore() . 要恢复到最后的保存状态，可以使用ctx.restore() 。
解决方案2
1
How do I remove image 3 from the canvas keeping the other two?
You need to clear the canvas for example using clearRect() , then redraw only those you want to keep. 例如，您需要使用clearRect()清除画布，然后仅重绘要保留的画布。 There are just unbound pixels on the canvas which you need to manually track. 画布上只有未绑定的像素，您需要手动跟踪。
One suggestion on how to do this is encapsulate the information about an image into a simple object: 关于此操作的一个建议是将有关图像的信息封装到一个简单的对象中：
var oImg1 = {
image: img1, // image object
visible: true, // state
x: 10, // handy
y: 10 // dandy
},
//... etc. for the other images (could use an array if there are many)
Then 然后
if (oImg1.visible) ctx.drawImage(oImg1.image, oImg1.x, oImg1.y);
When you need to remove an image set visible to false , clear and redraw using conditions. 当您需要删除visible为false的图像集时，请使用条件清除并重绘。
解决方案3
1 2016-06-16 20:39:29
You can either simply clear and redraw the images you require, if you're doing this via a loop. 如果通过循环执行此操作，则可以简单地清除并重新绘制所需的图像。
Or, you can simply draw over the image you no longer require. 或者，您可以简单地绘制不再需要的图像。
Eg 例如
<img id="img1" src="GITS01.jpg" style="display:none;">
<img id="img2" src="Matrix01.jpg" style="display:none;">
<img id="img3" src="silent-hills2.jpg" style="display:none;">
<canvas id="canvas"></canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
ctx.canvas.width = window.innerWidth * 0.8;
ctx.canvas.height = window.innerHeight * 0.8;
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var img3 = document.getElementById('img3');
// Let's clear the canvas first.
ctx.fillStyle = '#101010';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// Draw 3 images, top left, top right and bottom right quadrants.
ctx.drawImage(img1, 0, 0, ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.drawImage(img2, ctx.canvas.width / 2, 0, ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.drawImage(img3, 0, ctx.canvas.height / 2, ctx.canvas.width / 2, ctx.canvas.height / 2);
// Now, let's remove that second image in the top right quadrant,
// by simply drawing over it with a blank rectangle.
ctx.fillRect(ctx.canvas.width / 2, 0, ctx.canvas.width / 2, ctx.canvas.height / 2);
</script>
Depending on what else you need to draw, or if there's overlapping elements, then you will need to simply clear the canvas and redraw what you require. 根据需要绘制的内容或元素重叠的情况，只需清除画布并重新绘制所需的内容即可。 This is because the canvas draws in immediate mode. 这是因为画布以即时模式绘制。 You either need to draw over what you just drew precisely, or you have to clear and start again, removing the draw operations for the things you don't need. 您要么需要重新绘制刚刚绘制的内容，要么必须清除并重新开始，删除不需要的内容的绘制操作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.