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

时间:2012-01-06 10:42:51

标签: javascript html5 canvas

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

1 个答案:

答案 0 :(得分:15)

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

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

但是,如果你问Monet “你如何从画作中移除某个人?”并且他可能会看到你很有趣然后回复“ Quoi?你要么要画一幅新画,要么画在人的上方!“同样,如果你想从画布上”删除“某些内容,你必须重新开始(清除画布和绘制除了那个东西之外的所有东西)或重新绘制图像背后的“背后”。

Here is an example I made显示了一种方法,可以“保存”画布的一部分(通过将其绘制到另一个画布),然后将其绘制回某些内容以“擦除”它。

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

通过让用户输入的“绘画”部分在一个或多个画布上完成,然后将这些画布与其他项目(例如带有文本的<div>或{{{ 1}}用于图片,或基于矢量的SVG图稿。

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