如何从HTML画布中取消绘制、隐藏、移除或删除图像？

Question

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

在网上，关于如何将图像放在画布上的内容已经很详细了。但是，当它被放置后，我该如何将其移除呢？

- John Mee

---

HTML5画布被恰当地命名为画布，因为它几乎像真正的画布一样工作，你可以在上面绘制（渲染）东西，但你不能删除它。你可以用另一张图像覆盖它，你可以清除渲染那个图像的像素，或者你可以完全清空画布。这个stackoverflow答案展示了如何仅清除图像占用的像素：https://dev59.com/r3A75IYBdhLWcg3wH1XP - kreek

谢谢。现在为什么在“[html5] [canvas] remove”搜索结果中没有出现这个问题呢？如果您在搜索查询中添加“removing”，它会找到它，但是需要知道主题行才能找到它的方法。 - John Mee

Answer 1

Canvas是一种即时绘制表面。这意味着您在其上执行一个命令（drawImage或fillRect），它会执行该命令，而不关心已经完成的内容。没有撤销某些操作的功能。

您很难找到它，因为Canvas没有"删除"这样的功能。它只知道从“某个地方”获取到了某些颜色的像素。但它不知道来自哪里。

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

1. 清除整个Canvas，然后重新绘制除您不想绘制的图像以外的所有内容
2. 使用两个Canvas，一个只包含该图像，另一个包含所有其他东西。使用clearRect (0,0,width,height) 清除此Canvas，你就完成了。

您会发现，在第1种方法中，如果要选择性地删除或重新定位其中的某些元素，则可能需要开始跟踪您在Canvas上绘制的内容。使对象持久化，或者说将Canvas从即时绘图表面转变为保留绘图表面，是许多Canvas库所做的事情。如果您想自己实现它，我写了一些教程来帮助人们入门。

如果您想查看库，请看一下easel.js。它相当容易学习。

- Simon Sarris

Answer 2

选项1：
绘制与背景相同颜色的矩形。

选项2（适用于复杂背景，但速度较慢）：
从canvas中获取像素数据，然后重新绘制该像素数据以去除图像。

- someone

---

我选择了“重绘”程序，它在需要时清除并重新绘制整个画布，因为它不是动画或特别占用资源的东西。 - John Mee

Answer 3

所以，我想出了一种快速简便的方法来清空我的画布。我只需要把<canvas>标签放在带有一个ID的<p>标签之间，然后每次需要清空画布时，只需重新渲染我的<p>标签，通过改变innerHTML，它非常有效。

- Me3