在 HTML5 中创建一个简单的绘图工具？答案

【问题标题】：Create a simple drawing tool in HTML5?在 HTML5 中创建一个简单的绘图工具？
【发布时间】：2011-07-20 17:25:16
【问题描述】：

我正在从事这个项目，我想让我的用户能够按房间绘制简单的平面图，然后将一些元数据（如房间名称）存储起来。

我是这样看的： - 你点击“添加新房间” - 你在屏幕上画一个矩形（或者可能是另一个简单的形状） - 你给它一个名字

我想了解用于创建此类工具的最佳（和最简单）语言。 HTML5+jQuery？闪光？是否有任何现有的工具/插件可以解决问题？

感谢您的帮助！

【问题讨论】：

我可能会说 Flash 是您想要的。仅使用 JavaScript（菱形或圆形）绘制“简单”形状并不容易，而通过 Flash 可以轻松实现。你可以使用SVG。 HTML5 提供了<canvas> 允许您绘制形状，但您需要有自定义代码来绘制菱形、菱形等。
@vinceh： IE9 支持 SVG，Raphael SVG/JavaScript 库为旧版本的 IE 提供了 VML。

【解决方案1】：

最简单的方法可能是在 HTML5 中使用 canvas 标签。您可以使用 jquery 来获取鼠标事件。

如果您有使用 Flash 的访问权限和经验，那可能是您最好的选择，因为与 html5 相比，用户更有可能拥有 Flash。

如果你确实使用 html5，这里有一些很好的帮助文档

【讨论】：

【解决方案2】：

我会使用 jQuery 和 html5 画布元素，但我会让用户使用直线绘制形状。他们单击线条图像，选择两个点，然后 jQuery 绘制线条。使用 jQuery 绘制形状将允许您存储它们，以便您轻松添加元数据，并将序列化的数据打包到数据库中以供将来使用，或存储为图像，随心所欲。

【讨论】：