Сохранение HTML5 Canvas в качестве данных

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/