如何在Javascript中删除图像实例

在我的程序中，我在画布上多次绘制图像。我的代码如下所示：

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

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（'2d'）；
ctx.drawImage（图像1、50、50、200、100）；
ctx.drawImage（图像1100、100、200、100）；

---

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

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

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

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

可能相关

ctx.clearRect（100100200100）？