0

在我的程序中，我在画布上多次绘制图像。我的代码看起来像这样：

<img id="image1" src="image1.png" width="200" height="100" hidden ="hidden">
<script type ="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image1, 50, 50, 200, 100);
        ctx.drawImage(image1, 100, 100, 200, 100);
<script/>

我的问题是，是否可以仅删除此图像的一个实例？例如，只需删除在 100,100 处绘制的图像并将其保留在 50,50 处？

4

1 回答 1

1

当你在画布上画东西的那一刻，它就不再是一个独立的对象，而是变成了画布上的一堆像素。这些像素一起形成一个更大的对象的信息丢失了。您可以使用 context.clearRect 将其删除，但这也会擦除在同一区域绘制的任何其他内容，因此当图像与其他内容重叠时，它不会执行您想要的操作。

我建议您清除整个画布并在没有图像的情况下再次绘制整个场景。

另一种选择是使用多个画布作为图层，通过使用 CSS 定位将它们放在彼此之上。这样，顶部画布上的任何透明像素都将显示下面画布的内容。这允许您擦除一个画布的部分内容，而不会影响其上方或下方的画布内容。

于 2013-03-27T22:04:10.240 回答