在画布上绘制多个图像，然后删除其中之一
[英]Draw multiple images to canvas and then remove one of them
问题描述
获得Canvas元素及其上下文之后
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
假设我在上面画了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
如何从画布上删除图像3并保留其他两个图像？ clearRect不会在绘图区域中删除任何内容吗？！ 如果没有，为什么？
非常感谢。
3 个解决方案
解决方案1
1 已采纳 2016-06-16 19:27:02
它不包含任何单独的元素，就像我们在html中看到的那样，当多个元素在另一个具有不同z-index的元素上流动时。 它就像一个状态。 因此，它就像一个像素数据数组（它们称为ImageData）。 您可以捕获状态。
只是一个示例代码：
<!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>
我刚刚修改了w3schools tryIt的示例代码（ http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage ）。
您可以使用ctx.save()在使用drawImage()进行更改时保持可恢复状态。 要恢复到最后的保存状态，可以使用ctx.restore() 。
解决方案2
1
如何从画布上删除图像3并保留其他两个图像？
例如，您需要使用clearRect()清除画布，然后仅重绘要保留的画布。 画布上只有未绑定的像素，您需要手动跟踪。
关于此操作的一个建议是将有关图像的信息封装到一个简单的对象中：
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)
然后
if (oImg1.visible) ctx.drawImage(oImg1.image, oImg1.x, oImg1.y);
当您需要删除visible为false的图像集时，请使用条件清除并重绘。
解决方案3
1 2016-06-16 20:39:29
如果通过循环执行此操作，则可以简单地清除并重新绘制所需的图像。
或者，您可以简单地绘制不再需要的图像。
例如
<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>
根据需要绘制的内容或元素重叠的情况，只需清除画布并重新绘制所需的内容即可。 这是因为画布以即时模式绘制。 您要么需要重新绘制刚刚绘制的内容，要么必须清除并重新开始，删除不需要的内容的绘制操作。
在画布上绘制多个图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.