绘制多张图片到 canvas，然后移除其中一张

Question

获取 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

如何从 canvas 中删除图像 3 并保留另外两个？ clearRect 不会删除绘图区域中的任何内容吗？！如果不是，为什么？

非常感谢。

Answer 1

它不包含任何单独的元素，就像我们在 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().

Answer 2

How do I remove image 3 from the canvas keeping the other two?

你需要清除 canvas 例如使用 clearRect()，然后只重绘你想保留的那些。 canvas 上只有未绑定的像素，您需要手动跟踪。

关于如何做到这一点的一个建议是将有关图像的信息封装到一个简单的对象中：

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 时，使用条件清除并重绘。

Answer 3

如果您通过循环执行此操作，则可以简单地清除并重新绘制所需的图像。

或者，您可以简单地绘制您不再需要的图像。

例如

<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>

根据您还需要绘制的内容，或者如果存在重叠元素，您只需清除 canvas 并重新绘制您需要的内容。这是因为 canvas 以立即模式绘制。您要么需要精确地绘制刚刚绘制的内容，要么必须清除并重新开始，删除不需要的内容的绘制操作。

绘制多张图片到 canvas，然后移除其中一张

Draw multiple images to canvas and then remove one of them

html

javascript

canvas

drawimage