LXF94:Графическое web-приложение

Версия 14:48, 12 марта 2008

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() создает путь отсечения так, что вы можете ограничить холст определенной фигурой, например, кругом или сложным многоугольником.