LXF94:Графическое web-приложение
|
|
|
Содержание |
Canvas: Холст для web-картин
Новый HTML-элемент canvas позволяет программировать графику в браузере. Дэн Фрост покажет вам, как использовать этот мощный тэг.
Рисование графики на web-страницах обычно отдавалось на откуп Flash или библиотекам на стороне сервера. Больше такому не бывать! Забудьте зависть и удовлетворите свои амбиции стать художником – по крайней мере в Firefox и Opera, благодаря тэгу <canvas>.
Впервые введенный фирмой Apple, этот тэг предоставляет программисту холст, чтобы рисовать на нем прямые, дуги, квадраты и так далее. Комбинируя простые элементы, можно получать блестящие результаты – как, вы узнаете чуть позже. В настоящий момент тэг canvas поддерживается браузерами Firefox, Opera, Safari и включен в спецификацию HTML 5 группой WHATWG (Web Hypertext Application Technology Working Group – Рабочая группа по технологии гипертекстовых приложений), что вселяет надежду на его грядущую повсеместную реализацию. В качестве краткого введения, на данном уроке я собираюсь показать, как создать простые фигуры с помощью тэга canvas, поместить эти фигуры в объектную модель и, наконец, сделать их интерактивными.
Привет, мир графики
Чтобы работать с тэгом canvas, достаточно создать небольшой HTML-файл и открыть его в Firefox. Для начала рассмотрим несложный пример. Тэг canvas добавляется на страницу обычным образом. Атрибуты «ширина» и «высота» говорят сами за себя; но вы также можете включить стандартные HTML-атрибуты, типа class, id, style и других:
<canvas id=”canvas” style=”border : thin solid black;” width=”600” height=”400”></canvas>
Добавьте этот кусок кода на пустую HTML-страницу и откройте ее в браузере с помощью File > Open (Файл > Открыть). Все, что вы видите – это пустая область с границей, так как наш код устанавливает тэг canvas, но ничего другого не делает: просто обозначает пустой холст на странице.
Самое интересное начинается в JavaScript. JS используется для рисования линий, кривых, областей и изображений на объекте canvas. Чтобы создать две линии, добавьте это в только что созданный файл и обновите страницу в Firefox:
<canvas id=”canvas” width=”600” height=”400” style=”background-color : #c0c0c0;”></canvas> <script> var canvas = document.getElementById(‘canvas’); ctx = canvas.getContext(‘2d’); ctx.lineTo(100, 100); ctx.lineTo(200, 300); ctx.lineTo(300, 100); ctx.lineTo(300, 300); ctx.stroke(); </script>
Давайте разберемся. Сначала мы получаем HTML-элемент (или узел) по id ‘canvas’. Затем из элемента canvas мы получаем контекстный объект, его мы рассмотрим далее. Объект используется для собственно рисования.
Вот и все, что необходимо для применения тэга canvas: HTML-тэг и немного JavaScript. Вся ваша разработка может вестись с помощью Firefox и тестироваться вне сервера, так как логика и рисование находится на стороне клиента. Но что мы можем? Чтобы подстрекнуть свое воображение, гляньте на панель Dashboard от Apple (сайт http://www.apple.com/macosx/features/dashboard). Кроме того, всплывает масса мелких примеров: от реализации Paint (CanvasPaint) до восхитительных игр вроде Blobsallad (http://blobsallad.se) и Canvascope (http://www.abrahamjoffe.com.au/ben/canvascape).
Программировать с помощью canvas совсем не сложно – мой пример это доказывает. Но если вам неохота писать тысячи строк лапшеобразного кода для отрисовки сложного извива ДНК, поможет объектная модель. Наша следующая задача – поместить функциональность canvas в очень простой (50 строк) модуль, для упрощения управления фигурами.
Расширяем холст
Рисование фигур
Градиенты, дуги и кривые
Взаимодействие с холстом
Ресурсы
- http://developer.mozilla.org/en/docs/Canvas_tutorial Руководство от Mozilla, описывающее все доступные функции.
- http://canvaspaint.org Полюбуйтесь на canvas-версию старой программы Paint.
- http://www.whatwg.org/specs/web-apps/current-work/#the-canvas WHATWG-спецификация canvas.
Попробуйте еще
Не останавливайтесь на достигнутом – попробуйте другие функции...
- createPattern() превращает изображения или другие объекты canvas в шаблоны для многократного использования.
- clearRect(x2,y1,x2,y2) очищает кусок холста.
- clip() создает путь отсечения так, что вы можете ограничить холст определенной фигурой, например, кругом или сложным многоугольником.
