将HTML5 Canvas保存为数据

Question

我想将HTML5画布上的图形元素保存到磁盘，对其他地方的数据进行一些操作，然后读取操作数据abck并重新绘制画布。我只找到了将画布保存为图像的解决方案。是否可以查询/遍历画布包含哪些元素？我认为WPF / Silverlight有这样的东西。

-pom -

Answer 1

不，您必须保存您在对象中绘制的内容，例如：

{"shape": "circle", "x": 45, "y": 112, "radius": 23, "color": "ff3480"}

然后您可以将对象序列化为JSON并将它们保存在磁盘或数据库中。您还需要用于反序列化JSON的功能并再次绘制对象。

Answer 2

没有内置方式。 Canvas是一个直接的绘图表面，仅此而已。当你告诉它绘制一个矩形时，它会抛出一些像素，然后忘记你刚才所做的一切。如果你想跟踪你必须自己做的任何事情，或者得到一个完全相同的图书馆。

SVG是保留的绘图表面。绘制的每个项目实际上是一个DOM对象，其数据表示其当前状态。根据您正在做的事情，使用SVG可以为您节省很多麻烦。

Raphael是一个SVG库，如果您希望了解已经完成的工作，这可能是一个很好的起点。查看他们的一些样本：

http://raphaeljs.com/