Можностей, предоставляемых веб-разработчикам
ХОЛСТ И SVG: В КАКОМ СЛУЧАЕ ЧТО ИСПОЛЬЗОВАТЬ
жүктеу/скачать 5,47 Mb. Pdf көрінісі
|
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)
- Бұл бет үшін навигация:
- ХОЛСТ И SVG: В КАКОМ СЛУЧАЕ ЧТО ИСПОЛЬЗОВАТЬ
| ХОЛСТ И SVG: В КАКОМ СЛУЧАЕ ЧТО ИСПОЛЬЗОВАТЬ
Оба API для рисования — Canvas и SVG — прекрасны, но предназначены для разных целей Оцените их преимущества и недостатки, чтобы выбрать инструмент, наиболее подходящий для вашей задачи SVG — это API с отображением с задержкой, а 2D canvas — API с немедленным отображением SVG основывается на векторной графике, поэтому намного лучше масштабируется; холст дает растровое изображение, поэтому не масштабируется, просто сжимаются и растягиваются SVG строит дерево, представляющее текущее состояние всех объектов на экране (аналогично дереву DOM, описывающему текущий документ) Именно поэтому он называется API с отображением с задержкой Такое дерево предоставляет отличную возможность для построения интерактив- ных приложений Привязываясь к различным объектам дерева, вы прослушиваете щелчки или ожидаете события прикосновения, например, для распознавания действий пользователя в играх Код SVG можно писать вручную, так как это всего лишь обычный XML — а все новейшие браузеры (за исключением, как ни странно, браузеров Android WebKit) полностью поддерживают данную технологию, как в случае внешней привязки файлов с кодом, так и внутри HTML5 Но если вам не слишком по нраву сражаться с XML, настольные инструменты, такие как Adobe Illustrator и Inkscape, позволяют импортировать и экспортировать рисунки SVG, что значительно упрощает жизнь Если вы еще не до конца уверены, хороший ли это инструмент, попробуйте поэксперименти- ровать с Raphaёl, библиотекой JavaScript Дмитрия Барановского (http://raphaeljs com) В ней используется только SVG, и она способна создавать очень впечатляющие рисунки и анимацию Холст, по сути, представляет собой набор пикселов и хорошо подходит для создания аними- рованных изображений и приложений, сконцентрированных вокруг JavaScript По сравнению с SVG, это более низкоуровневый API, то есть он лучше подходит для ситуаций, когда движения мыши отслеживать не требуется Так как дерева состояния холста здесь нет, невозможно при- вязать обработчик событий к объектам на холсте — приходится вычислять позицию, где произо- шло событие мыши, и сохранять все координаты нарисованных объектов в памяти Но поскольку холст — очень JavaScript-центричный интерфейс, события клавиатуры можно обрабатывать на уровне документа Наконец, при работе с холстом вы оперируете отдельными пикселами, что прекрасно иллюстрируют снимки экрана в начале главы, следовательно, API canvas превосходно подходит для пиксельного рисования У каждой из этих технологий есть сильные и слабые стороны Ваша задача как разработчи- ка — проанализировать требования создаваемого вами приложения и выбрать правильный инструмент Удачи! |