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