使用HTML / CSS / Javascript绘制基本形状

Question

我需要设计一个网络应用程序，允许访问者绘制和标记基本形状。参观者将绘制商店的基本地图。绘制的形状需要存储在数据库（它们的坐标和大小）以及它们的标签和一些选项中，以便稍后可以在不同的应用程序中轻松复制它们。

在网页上完成此操作的最简单方法是什么？！

Answer 1

如果我这样做，我会使用Raphaël。

查看上述链接上的演示，它可以all sorts of crazy。

如果您正在使用实际代码示例，如果您愿意，我可以使用Raphaël。

它适用于许多浏览器：

  

Raphaël目前支持Firefox 3.0 +，Safari 3.0 +，Chrome 5.0 +，Opera 9.5+和Internet Explorer 6.0 +。

Answer 2

查看http://zwibbler.com

Answer 3

你可以使用纯CSS绘制一些很酷的形状。

检查http://jsfiddle.net/yFn6z/1/

处的工作示例

绘制带有边框的CSS形状的更多方法是http://www.vanseodesign.com/css/creating-shapes-with-css-borders /
http://www.sendesignz.com/index.php/css/68-how-to-draw-speech-bubble-and-shapes-with-css3
http://net.tutsplus.com/articles/news/fun-with-css-shapes/

如果要绘制各种矢量形状，请使用Raphaël javascript library。

Answer 4

如果它的线条和圆圈，您可以使用Bresenham的算法（在谷歌中读取更多，1x1px div，您选择的颜色代表线条或圆圈的每个点）一旦算法实现，您可以使用setAttribute通过使用FSO将每个形状分隔并将其存储为文本文件，将您想要的任何属性分配给用户绘制的每个线或圆并存储所有数据。存储的文本文件可用作保存用户进度的方法等。