如何从html画布中取出，隐藏，删除或删除图像？

Question

this.context.drawImage(myimage, 0, 0);

将图像放在画布上可以很好地覆盖整个网络。 但是如何在它出现之后将其删除？

Answer 1

Canvas是一个直接的绘图表面。这意味着你在它上面执行一个命令（drawImage或fillRect）并且它执行了该命令，并且它没有给出刚刚完成的任何操作。没有任何东西可以撤消。

你很难找到它，因为Canvas没有“删除”这样的东西。它只知道它有一些来自某处颜色的像素。它不知道在哪里。

为了简化一下，通常有两种方法：

1. 清除整个画布，然后重新绘制所有内容，除了您不想绘制的图像
2. 使用两个画布，一个只有图像，一个包含所有其他画布。用clearRect（0,0，宽度，高度）清除这个画布，你就完成了。

你会注意到1.你可能必须开始跟踪你在画布上绘制的东西，如果你想要选择性地删除或重新定位它们中的一些。灌注对象持久性，或者说将画布从直接绘图表面转换为保留的绘图表面，是许多画布库所做的事情。如果你想自己做，我写了一些tutorails来帮助人们开始。

如果您想查看图书馆，请查看easel.js。这很容易学习。

Answer 2

选项1：
在其上面绘制一个与背景颜色相同的矩形。

选项2（适用于非平凡的背景，但速度较慢）：
在绘制图像之前从画布Get the pixel data，然后重绘该像素数据以删除图像。

Answer 3

所以我提出了一种快速简便的方法来清理画布。我只是将<canvas>标记放在<p>标记之间，然后每次我需要清除画布，我只需通过更改<p>重新呈现innerHTML标记，即可喜欢魅力。