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

Версия 15:13, 12 марта 2008

Подписка на печатную версию: Весь 2015 год (12 номеров); Первое полугодие (6 номеров); Второе полугодие (6 номеров)

Подписка на электронную версию: Весь 2015 год (12 номеров); Первое полугодие (6 номеров); Второе полугодие (6 номеров)

Подшивки старых номеров журнала (печатные версии): Весь 2014 год (12 номеров); Первое полугодие (6 номеров); Второе полугодие (6 номеров)

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 строк) модуль, для упрощения управления фигурами.

Расширяем холст

Спецификация на canvas определяет множество функций для рисования простых фигур и линий, вроде прямоугольников, дуг и кривых второго порядка, которые можно комбинировать для создания более сложных, изощренных фигур. По мере того, как я буду описывать различные функции и возможности тэга, копируйте их в ранее созданный файл, чтобы понять смысл функций и как их использовать.

Фактически мы рисуем не на объекте canvas, а на его 2D-контексте. Чтобы получить контекст canvas, мы используем функцию getContext. Контекст – это объект, содержащий функции для рисования линий, блоков цветных изображений и так далее. Линии он называет штрихами [stroke], а цветовые блоки – заливкой [fill]:

var canvas = document.getElementById(‘canvas’);
ctx = canvas.getContext(“2d”);
ctx.strokeRect(50, 50, 100, 100);
ctx.stroke();
ctx.fillRect(100, 100, 100, 100);
ctx.fill();

Большая часть функций понятна: strokeRect() рисует прямоугольник, fillRect() его заполняет. У strokeRect() и fillRect() похожие параметры – x и y верхнего левого угла прямоугольника, а также ширина и высота. Canvas ведет отсчет от левого верхнего угла, то есть 50, 50 означает 50 пикселей слева и 50 пикселей сверху. Тем, кто привык мыслить в терминах координат обычных графиков, тут легко и запутаться! Заметим также, что нам надо вызывать функции .stroke() и .fill(). Не забудьте это сделать, иначе останетесь с пустым холстом.

Цвет линий и заливки устанавливается на холсте с помощью lineStyle и fillStyle, которые принимают похожие аргументы. Самый простой способ ввести цвет – указать его: ctx.lineStyle=’red’ – или обозначить шестнадцатеричным числом: ctx.lineStyle=’#a0b0c0’;. Для получения прозрачности предусмотрен альфа-канал в функции rgba(), принимающей четыре параметра: красный, зеленый, синий и альфа. Например:

ctx.lineStyle = ‘red’;
ctx.fillStyle = ‘rgb(200, 100, 0, 0.5)’;

Когда две линии пересекаются, стиль их сочленения можно выбрать с помощью lineJoin:

ctx.lineJoin = ‘curve’;

Две последние важные концепции – перенос и поворот. Перенос – это передвижение в другую точку холста; поворот, очевидно, и есть поворот холста. Оба действия производятся до того, как вы начнете рисовать. Например, если вы хотите нарисовать прямоугольник под 45°, то сначала вам надо добавить функцию поворота:

ctx.rotate(-45 * Math.PI / 180);
ctx.strokeRect(50, 50, 100, 100);
ctx.stroke();

Все эти настройки внутри холста, то есть lineStyle, fillStyle, поворот и перенос, можно сохранять в стеке состояний, а потом брать их оттуда. Это позволяет понаделать кучу стилевых настроек, а затем разом их отменить, закончив рисование:

ctx.save(); // Сохранить текущее состояние, чтобы мы могли его восстановить
ctx.rotate(-45 * Math.PI / 180);
ctx.lineStyle = ‘blue’;
ctx.strokeRect(50, 50, 100, 100); // нарисовать прямоугольник
ctx.stroke();
ctx.restore(); // восстановить lineStyle и поворот

Функции save и restore очень полезны, если вы производите много переносов и поворотов: они избавят вас от необходимости держать в памяти всю серию изменений.

Рисование фигур

Чтобы создать коллекцию фигур-шаблонов, заготовим пару полезных объектов: обертку холста и обертку фигуры. Обертка фигуры представляет наибольший интерес – она инкапсулирует различные сложные фигуры. Обертка холста будет следить за размещением фигур на холсте.

function draw() {
 ic = new iCanvas(‘canvas’);
 // добавьте здесь все свои фигуры
 setupInteraction();
}
function setupInteraction() { /* мы рассмотрим ее позднее*/ }
 iCanvas = {};
 iCanvas = Class.create();
 iCanvas.prototype = {
    /* ..вырезано.. */
 }
 // используется для инкапсуляции фигур
 iShape = {};
 iShape = Class.create();
 iShape.prototype = {
   /* ..вырезано... */
}
 // рисование будет проходить в этой функции
 renderShape : function() { },
}

Полная версия исходного кода доступна по адресу http://www.linuxformat.co.uk/mag/canvas.htm, но единственной важной частью является renderShape(), так как все, что мы будем туда писать, будет родным кодом холста – другие функции (например, drawShape()) добавляются для упрощения кодирования.

JavaScript сопровождается HTML-страницей, которая вызывает функцию draw() в момент загрузки. Следующий пример немного прояснит ситуацию. Нарисуем простой прямоугольник – скопируйте следующий код в функцию draw() выше, где написано добавьте здесь все свои фигуры. Он создает экземпляр класса shape и использует функцию strokeRect(). Для рисования фигуры вызывается функция drawShape обертки холста:

box = new iShape();
box.renderShape = function() {
 // this.c это контекст холста
 this.c.fillRect(0, 0, 100, 100);
 this.c.strokeRect(0, 0, 100, 100);
 this.c.stroke();
}
ic = new iCanvas(‘canvas’);
// теперь рисуем фигуры
ic.drawShape(box, {x : 200, y : 100});
ic.drawShape(box, {x : 100, y : 100});
ic.drawShape(box, {x : 250, y : 150});

Я вызывал drawShape несколько раз, чтобы показать, как можно повторно использовать фигуру после ее создания. Просто передайте объект и некоторые новые ссылки, и готово – получена новая копия фигуры.

Все, что делается с тэгом canvas, можно, по большей части, заложить в объект фигуры и повторно использовать его на холсте. Теперь нарисуем более сложный пример: дачный домик. Это всего лишь набор прямоугольников и треугольников:

house = new iShape();
house.renderShape = function() {
 this.c.fillStyle = ‘white’;
 this.c.fillRect(0, 0, 100, 100); // ставим белый фон
 this.c.strokeRect(0, 0, 100, 100);
 this.c.fill();
 this.c.strokeRect(20, 60, 20, 40); // дверь
 // окна
 this.c.fillStyle = “rgba(0, 0, 250, 0.3)”;
 this.c.fillRect(60, 60, 20, 20);
 this.c.fillRect(20, 20, 20, 20);
 this.c.fillRect(60, 20, 20, 20);
 this.c.fill();
 this.c.fillStyle = “rgba(250, 0, 0, 0.3)”;
 this.c.moveTo(0,0);
 this.c.lineTo(50,-30);
 this.c.lineTo(100,0);
 this.c.fill();
 this.c.stroke();
}

fillStyle использует функцию rgba(), позволяющую нам установить прозрачность. Вы можете установить прозрачность «для всего» с помощью .globalAlpha=0.5;. Часть lineTo рисует отрезок на холсте [от текущего положения] до точки (x,y). В данном примере мы используем ее для рисования крыши.

Как и в предыдущем примере, мы можем повторно использовать объекты на холсте с помощью функции drawShape(). Написав

ic.drawShape(house, {x : 200, y : 100});
ic.drawShape(house, {x : 300, y : 100});
ic.drawShape(house, {x : 400, y : 100});

вы отстроите целую уличку.

Градиенты, дуги и кривые

Градиенты используются как стили заливки – создайте объект градиента и используйте его для установки fillStyle перед рисованием. Градиенты можно сделать как линейными, так и радиальными, с помощью функций createLinearGradient и createRadilGradient соответственно. Сам градиент – это набор цветовых переходов, добавляемых с помощью addColorStop. Увидеть – значит понять; вот и посмотрите на градиент от красного до зеленого, затем синего и, наконец, белого.

gradbox = new iShape();
gradbox.renderShape = function() {
 var gradient = this.c.createLinearGradient(0, 0, 0, 100);
 // создать градиент – градации от x1,y1 до x2,y2
 gradient.addColorStop(0, ‘red’);
 gradient.addColorStop(0.25, ‘green’);
 gradient.addColorStop(0.75, ‘blue’);
 gradient.addColorStop(1, ‘white’);
 this.c.fillStyle = gradient;
 this.c.fillRect(0, 0, 100, 100);
}
ic.drawShape(gradbox, {x : 300, y : 300});

Функция createLinearGradient задает направление градиента – в нашем случае, вертикальное, от 0,0 до 0,100. Каждая из строк .addColorStop устанавливает цвет в соответствующий точке. Ноль (начало) – это красный, сливающийся с зеленым на четверти пути (0.25), затем синий на трех четвертях и белый в конце (1). Поиграйте с цветами и значениями в addColorStop – например, попытайтесь изменить 0.25 на 0.5, а 0.75 на 0.9.

Радиальные градиенты работают так же, как и линейные, используя «цветовые шаги», но создаваемый градиент не вертикальный, а проходящий от центра одного круга до границы другого, следующим образом:

gradblob = new iShape();
gradblob.renderShape = function() {
 var gradient = this.c.createRadialGradient( 50, 50, 1, 50, 50, 100 );
 gradient.addColorStop(0, ‘rgba(0,0,228,1)’);
 gradient.addColorStop(1, ‘rgba(228,0,0,0.5)’);
 this.c.fillStyle = gradient;
 this.c.fillRect(0, 0, 100, 100);
}
ic.drawShape(gradblob, {x : 200, y : 200});

Синтаксис примерно тот же, так что можете сразу начинать эксперименты с радиальными градиентами. Их можно даже создавать между двумя не выровненными окружностями – попробуйте установить this.c.createRadialGradient(50, 50, 1, 5, 5, 100).

Теперь займемся кривыми. Тэг canvas предлагает несколько способов создания кривых, одна из которых – дуга, позволяющая рисовать круги на холсте:

this.c.arc(50, 50, 20, 0, 2*Math.PI, false);

Первые и второй аргументы определяют центр дуги, а третий – радиус. Четвертый аргумент – угол начала дуги, пятый – конца. Шестой определяет, рисовать круг по часовой стрелке или против.

Чудненько. Но для рисования более сложных кривых лучше использовать quadraticCurveTo или bezierCurveTo. В следующем примере мы возьмем quadraticCurveTo и нарисуем глаз, точнее, верхнее и нижнее веки. Потом, чтобы правильно выровнять глаза, повернем холст на 45° с помощью функции rotate().

Аргументами для quadraticCurveTo являются координаты x и y исходной точки и точки назначения. Точка назначения определяет, куда вести кривую. Если вы незнакомы с таким типом кривых, посмотрите, как меняется кривая при изменении первых двух аргументов. Добавив градиент к дугам, нарисуем пару-тройку вытаращенных глаз:

eye = new iShape();
eye.renderShape = function() {
 this.c.save();
 this.c.beginPath();
 this.c.translate(0, 35);
 this.c.rotate(-45 * Math.PI / 180);
 this.c.moveTo(0, 0);
 this.c.quadraticCurveTo(100, 0, 100, 100);
 this.c.quadraticCurveTo(0, 100, 0, 0);
 this.c.stroke();
 this.c.closePath();
 this.c.beginPath();
 // рисуем дугу
 this.c.arc(50, 50, 20, 0, 2*Math.PI, false);
 this.c.globalAlpha = 0.5;
 var g = this.c.createRadialGradient( 50, 50, 1, 50, 50, 20 );
 g.addColorStop(0, ‘rgba(0,0,228,1)’);
 g.addColorStop(1, ‘rgba(228,199,0,0)’);
 //this.c.fillStyle = ‘green’;
 this.c.fillStyle = g;
 this.c.fill();
 this.c.stroke();
 this.c.closePath();
 this.c.restore();
}
ic.drawShape(eye, {x : 100, y : 100});
ic.drawShape(eye, {x : 300, y : 100});

Вы, наверное, заметили, что мы ввели новые функции для глаза: beginPath() и closePath(). Path, контур – это то, что функции fill() и stroke() заполняют и вдоль чего рисуют. На глазе мы закрыли один путь и начали другой, так как круги посреди глаза не соединяются с кривыми второго порядка, образующими верхнюю и нижнюю часть глаза. Закомментируйте this.c.closePath() и this.c.beginPath() посреди глаза и посмотрите на результат: у вас получится линия от левой стороны глаза до центра окружности. Так как путь между концом кривой и началом дуги не закрыт, метод stroke соединяет их.

Изображения можно помещать на холст с помощью drawImage(). Эта функция принимает в качестве аргументов объект изображения JavaScript и x / y координаты, но если вы хотите избежать возникновения исключения «не доступно», изображение должно быть загружено до drawImage(). Далее, как и с линиями и заполнением, вы можете повернуть холст до того, как нарисуете изображение, используя функцию .rotate():

this.c.rotate(-45 * Math.PI / 180);

Взаимодействие с холстом

Ресурсы

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

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

Версия 15:13, 12 марта 2008

Содержание

Canvas: Холст для web-картин

Привет, мир графики

Расширяем холст

Рисование фигур

Градиенты, дуги и кривые

Взаимодействие с холстом

Ресурсы

Попробуйте еще

Просмотры

Персональные инструменты

Навигация

Поиск

Инструменты

Печать/экспорт

купить

подписаться