Question

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

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

Answer 1

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

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

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

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

1 个答案: