我是画布(HTML5)新手,我必须在画布上设计一个绘画应用程序。有一个功能,例如在画布上动态添加所选图像(通过鼠标移动)以及删除和拖动添加的图像的功能(与文本添加相同)。现在我的问题是我们如何从画布中删除图像(注意:添加到画布中的图像没有固定数量。)您能给我建议一下方法吗?
HTML5 Canvas 很像现实世界的画布。当您在画布上绘制时,墨水会改变画布,与已有的其他内容混合并永远改变它们。
问莫奈“你如何在你的画中添加一个新的人物?”他可能会说“你只需要把它们画在你想要的地方就可以了!”同样,你使用drawImage()将图像“绘制”到您的画布上。
然而,如果你问莫奈“你怎么remove画中人?”他可能会用滑稽的眼神看着你然后做出回应“Quoi?你要么必须画一幅新画,要么在这个人的上面画!”同样,如果您想从画布上“删除”某些内容,您要么必须重新开始(清除画布并绘制除该内容之外的所有内容),要么重新绘制图像“后面”的内容。
这是我做的一个例子这显示了一种方法,您可以“保存”画布的一部分(通过将其绘制到另一个画布),然后将其绘制回某些东西上以“擦除”它。
不过,我通常建议您不要使用 HTML5 Canvas,除非您知道为什么需要它。您提到添加和删除项目,以及检测鼠标移动。用一个保留模式绘图系统(如 HTML 或 SVG)意味着您实际上在对象表示中添加、删除或更改项目,并且由其他人(浏览器)来确定如何最好地重新绘制它们。
最好的方法可能是让用户输入的“绘制”部分在一个或多个画布上完成,然后将这些画布与其他项目(例如<div>
带有文本的 s,或者<img>
用于图片或基于矢量的 SVG 图稿)。
您可以在画布类型上创建自己的保留模式系统,也可以使用其他人的库来执行此操作。但我建议您考虑这是否是实现目标的最佳和最简单的方法。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)