Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
ГЛАВА 22. Программируемая графика
В предыдущей главе мы познакомились со свободно позиционируемыми элементами Web-страницы и использовали их, чтобы улучшить систему поиска на нашем Web-сайте. Получилось неплохо, правда?
На этом мы закончим с поиском и обратим внимание на заголовок нашего Web-сайта. Как-то неказисто он выглядит — обычный текст без всяких изысков. И это в то время, когда большинство Web-сайтов щеголяют шикарными графическими логотипами. Почему у нас такого нет?
Потому что мы этим еще не занимались. Вообще, сделать графический логотип Web-сайта проще простого — достаточно нарисовать его в каком-либо графическом редакторе и сохранить в любом формате, применяемом в Интернете. А как поместить на Web-страницу графическое изображение, мы уже знаем — изучали еще в главе 4.
Существует и другой путь — задействовать возможности программируемой графики, предлагаемые HTML 5. Они позволяют нарисовать любую, даже весьма сложную фигуру программно, из Web-сценария. Причем пользоваться этими возможностями не так и сложно — достаточно уяснить пару концепций и выучить несколько десятков методов.
Давайте так и сделаем. Ведь если мы взялись изучать HTML 5, так уж будем идти до конца.
- Канва
- Контекст рисования
- Рисование простейших фигур
- Задание цвета, уровня прозрачности и толщины линий
- Рисование сложных фигур
- Вывод текста
- Использование сложных цветов
- Вывод внешних изображений
- Создание тени у рисуемой графики
- Преобразования системы координат
- Управление наложением графики
- Создание маски
- Создание графического логотипа Web-сайта