Я только что начал проект, используя Canvas. Но одна из вещей, которые мне нужны, — это отслеживать подвижные блоки, на которые можно щелкнуть, как в этом примере: http://raphaeljs.com/graffle.html, поэтому мне интересно, будет ли Raphael-js + SVG лучше.
Что бы вы использовали? И почему?
Этот ответ скопирован из моего ответа на другой вопрос. Но затем ОП изменил вопрос, и поэтому этот ответ стал для него менее актуальным. ИМХО, это более актуально для этого вопроса, так что вот:
Думайте о разнице между canvas и svg как о разнице между Photoshop и Illustrator (или Gimp и Inkscape для вас, ребята из OSS). Один работает с растровыми изображениями, а другой — с векторной графикой.
С холстом, поскольку вы рисуете в растровом изображении, вы можете легко размазывать, размывать, сжигать, уклоняться от изображений. Но поскольку это растровое изображение, вы не можете легко нарисовать линию, а затем решить изменить ее положение. Вам нужно удалить старую линию, а затем нарисовать новую линию.
С svg, поскольку вы рисуете векторы, вы можете легко перемещать, масштабировать, вращать, перемещать, переворачивать свои рисунки. Но поскольку это векторы, вы не можете легко размыть края в соответствии с толщиной линии или плавно соединить красный круг с синим квадратом. Вам нужно имитировать размытие, рисуя промежуточные полигоны между объектами.
Иногда варианты их использования пересекаются. Например, многие люди используют холст для рисования простых линий и отслеживания объектов как структур данных в javascript. Но на самом деле они оба служат разным целям. Если вы попытаетесь реализовать векторный рисунок общего назначения в чистом javascript поверх холста, я сомневаюсь, что вы будете быстрее, чем использовать svg, который, скорее всего, реализован в C.
Пара вещей, которые нужно решить: хотите ли вы, чтобы ваши материалы работали в мобильных браузерах? SVG (Raphael) не будет работать на Android (не знаю насчет iphone). И наоборот, если вы хотите что-то, что будет работать со старыми версиями Internet Explorer, холст может не работать (не уверен, поддерживает ли ExCanvas IE6), но SVG в некоторой степени работает (Raphael поддерживает IE6).
Кроме того, вы просто делаете анимацию/рисование или делаете полноценное приложение, которому могут понадобиться такие вещи, как кнопки, ползунки, контейнеры вкладок, списки, сетки и т. д.
Если вы создаете полноценное приложение и хотите, чтобы оно работало и на мобильных устройствах, вы можете воспользоваться набором инструментов dojo, в частности, dojox.gfx и другими графическими библиотеками dojox: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/
dojox.gfx — это библиотека векторной графики, которая поддерживает несколько бэкендов: canvas, SVG и даже silverlight. Вот статья, сравнивающая его с Рафаэлем: http://www.lrbabe.com/?p=217
Ознакомьтесь также с Cake.js для отдельной библиотеки графиков сцен для холста: http://code.google.com/p/cakejs/ А также ознакомьтесь с processingjs.
