將HTML5畫布保存爲數據

Question

我想將HTML5畫布上的圖形元素保存到磁盤，對其他位置的數據進行一些操作，然後讀取操縱的數據abck並重新繪製畫布。我只找到將畫布保存爲圖像的解決方案。是否有可能查詢/遍歷畫布中包含的元素？我認爲WPF/Silverlight有這樣的東西。

-pom-

Answer 1

不，你必須保存你在繪畫的對象，例如像：

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

，那麼你可以序列化對象以JSON並將它們保存在磁盤或數據庫。您還需要反序列化JSON並再次繪製對象的功能。

Answer 2

沒有內置的方式。帆布是一個即時繪圖表面，僅此而已。當你告訴它繪製一個矩形時，它會拋出一些像素，然後忘記你剛剛完成的一切。如果你想跟蹤任何事情，你必須自己做所有事情，否則就得到一個完全相同的圖書館。

SVG是一個保留的繪圖表面。每個繪製的項目實際上都是一個DOM對象，其數據代表其當前狀態。根據你在做什麼，使用SVG會爲你節省很多頭痛。

Raphael是一個SVG庫，可能是一個很好的起點，如果你想看看已經完成了什麼。看看他們的一些樣品：

http://raphaeljs.com/