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

如何从画布中删除图像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

如何从画布中删除图像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，请使用条件清除并重绘。

Answer 3

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

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

E.g。

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

根据您需要绘制的其他内容，或者是否存在重叠元素，您需要简单地清除画布并重新绘制所需内容。这是因为画布以立即模式绘制。您需要绘制精确绘制的内容，或者必须清除并重新开始，删除不需要的内容的绘制操作。

将多个图像绘制到画布，然后删除其中一个

3 个答案: