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

How to delete an instance of an image in Javascript

本文关键字：图像 实例 删除 Javascript      更新时间：2023-09-26

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

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

你在画布上画东西的那一刻，它就不再是一个独立的对象，而是成为画布上的一堆像素。这些像素一起形成一个更大的物体的信息丢失了。你可以通过context删除它。但这也会擦除在同一区域上绘制的任何其他内容，所以当图像与其他内容重叠时，它不会做你想做的事情。

我建议你清除整个画布，并重新绘制整个场景没有图像。

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

相关文章：