【问题标题】:How to add and remove (multiple) image from canvas.?如何从画布中添加和删除(多个)图像。?
【发布时间】:2012-01-07 06:23:56
【问题描述】:

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

【问题讨论】:

  • 您是否查看过像 fabric.js 这样的画布库?
  • 是的,我看过那个。但是该库没有足够的教程。 :(

标签: javascript html canvas


【解决方案1】:

HTML5 画布很像真实世界的画布。当您在画布上绘图时,墨水会改变画布,与已经存在的其他内容混合并永远改变它们。

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

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

Here is an example I made 展示了一种方法,您可以“保存”画布的一部分(通过将其绘制到另一个画布上),然后将其重新绘制到某个东西上以“擦除”它。

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

最好让用户输入的“绘制”部分在一个或多个画布上完成,然后将这些画布与其他项目(例如 <div>s 与文本,或 <img> 用于图片或基于矢量的 SVG 图稿)。

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

【讨论】:

  • 这是我在 SO 看到的最佳答案之一。 +1。
猜你喜欢
  • 2020-10-01
  • 2016-10-31
  • 1970-01-01
  • 2012-06-05
  • 1970-01-01
  • 2019-10-17
  • 1970-01-01
  • 2016-04-21
  • 2012-02-15
相关资源
最近更新 更多