Можностей, предоставляемых веб-разработчикам


ХОЛСТ И SVG: В КАКОМ СЛУЧАЕ ЧТО ИСПОЛЬЗОВАТЬ



Pdf көрінісі
бет195/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   191   192   193   194   195   196   197   198   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

ХОЛСТ И 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 превосходно 
подходит для пиксельного рисования 
У каждой из этих технологий есть сильные и слабые стороны  Ваша задача как разработчи-
ка — проанализировать требования создаваемого вами приложения и выбрать правильный 
инструмент  Удачи!




Достарыңызбен бөлісу:
1   ...   191   192   193   194   195   196   197   198   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет