如何在 Javascript 中删除图像的实例答案

【问题标题】：How to delete an instance of an image in Javascript如何在 Javascript 中删除图像的实例
【发布时间】：2013-03-28 06:15:45
【问题描述】：

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

<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 处的图像？

【问题讨论】：

可能相关stackoverflow.com/q/5183872/1615483
ctx.clearRect(100, 100, 200, 100);?

标签： javascript html

【解决方案1】：

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

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

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

【讨论】：