如何在画布中添加和删除（多个）图像。

Question

我是canvas的新手（HTML5）我必须在画布上设计一个绘画应用程序。 有一个功能，如在画布上动态添加所选图像（在鼠标移动时）和删除和拖动添加的图像的功能（相同的文本添加）。 现在我的问题是我们如何从画布中删除图像（注意：画布中没有固定的图像数量。）你能告诉我这个方法吗？

Answer 1

HTML5 Canvas很像真实世界的画布。 当您绘制到画布时，墨迹会更改画布，与已存在的其他内容混合并永远更改它们。

询问莫奈“你如何为你的画添加一个新人？” 他可能会说“你只是把它们涂在你想要的地方！” 同样，您使用drawImage()将图像“绘制”到Canvas中。

但是，如果你问莫奈“你怎么从绘画中删除一个人？” 他很可能会看着你好笑，然后回答“Quoi？你要么要做一幅新画，要么画在人的上面！” 同样，如果你想要从画布中“删除”某些东西，你必须重新开始（清除画布并绘制除了那个东西之外的所有东西）或者重新绘制图像背后的“背后”。

这是我制作的一个示例 ，它显示了一种方法，您可以“保存”画布的一部分（通过将其绘制到另一个画布），然后将其绘制回某些内容以“擦除”它。

但是，我通常建议您不要使用HTML5 Canvas，除非您知道为什么需要它。 您提到添加和删除项目，以及检测鼠标移动。 使用保留模式绘图系统（如HTML或SVG）意味着您实际添加或删除或更改对象表示中的项目，并由其他人（浏览器）决定如何最好地重绘它们。

通过让用户输入的“绘画”部分在一个或多个画布上完成，然后将这些画布与其他项目（例如带文字的<div> s或图片的<img>合成，或者最合适的服务基于矢量的SVG图稿）。

您可以在画布类型上创建自己的保留模式系统，也可以使用其他人的库来执行此操作。 但相反，我建议您考虑这是否是实现目标的最佳和最简单的方法。