Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org) Рис . 5 .4 .
Залитый цветом прямоугольник
Рис . 5 .5 .
Используем стили заливки
с настройками холста по умолчанию
и прямоугольную обводку
В предыдущем фрагменте кода мы рисуем две фигуры: первую с помощью
fillRect
,
а вторую с помощью
strokeRect
, предварительно задавая цвет и стиль контекста 2D.
Настраивать внешний вид фигур необходимо до вывода на экран; в противном случае
166 • Глава 5
будет использован стандартный черный цвет. Помимо цветов CSS (например, RGB, hex,
RGBA и т. д.), методы
fillStyle
и
strokeStyle
поддерживают градиенты и узоры, сгене-
рированные в API 2D.
КАК НАСЧЕТ ПОДДЕРЖКИ БРАУЗЕРАМИ?
Поддержка элемента
в браузерах реализована достаточно хорошо; холст поддержи-
вается в последних версиях четырех из пяти наиболее распространенных браузеров (и, если
уж на то пошло, в старых версиях холст также работает неплохо) Чаще всего, конечно, задают
вопрос, работает ли это в Internet Explorer
В версиях IE, которые элемент
не поддерживают (IE8 и более ранние), его можно
имитировать с помощью пары хитростей Например, применить решение FlashCanvas — оно
выглядит наиболее многообещающим В качестве резервного средства оно полагается на Flash,
но должно успешно считывать весь код, относящийся к холсту, и преобразовывать его в графи-
ческий слой Flash: http://flashcanvas net
Существует еще похожий метод на базе Silverlight и библиотеки под названием html5canvas (http://
blogs msdn com/delay/archive/2009/08/24/using-one-platform-to-build-another-html-5-s-canvas-
tag-implemented-using-silverlight aspx) Также можно воспользоваться библиотекой excanvas
(http://code google com/p/explorercanvas/), которая преобразует API холста в Microsoft VML
Эти две библиотеки охватывают не всю функциональность API 2D, только большинство наиболее
часто используемых методов В сети есть примеры, демонстрирующие реализацию практических
задач с помощью этих библиотек Веб-сообщество считает наиболее приемлемым метод запол-
нения с помощью FlashCanvas Мне чудится тонкая ирония в том, что нам (снова) приходится
полагаться на Flash для реализации технологии, которая, по идее, должна его заменить Но что
делать — такова Сеть!
Стоит также отметить и хорошенько запомнить, что перечисленные методы заполнения не
сравнятся в производительности с «родным» элементом
Не могу подтвердить свои
слова научными диаграммами, но мне кажется, что FlashCanvas должен работать быстрее
остальных Тем не менее «лучше остальных» не означает такой же уровень производительности,
особенно если рассматривать браузер с аппаратным ускорением визуализации холста, таким
как реализован в IE9
ПРИМЕЧАНИЕ
querySelector и querySelectorAll — это новые методы объектной модели документов (Document
Object Model, DOM), которые принимают селектор CSS и возвращают соответствующие элемен-
ты Доступный во всех новейших браузерах, querySelector возвращает первый найденный узел
DOM, тогда как querySelectorAll возвращает объект NodeList Пройдя по содержимому этого
объекта, вы можете выбрать необходимые элементы
Достарыңызбен бөлісу: