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 строк) модуль, для упрощения управления фигурами.
Расширяем холст
Спецификация на 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);
Взаимодействие с холстом
Картинки рисовать мы научились. Но ключевая задача сети – обеспечить взаимодействие пользователя с объектами. На нашем уроке мы реализовали возможность создания копий фигур всего одной строкой кода, drawShape(). Форма каждого объекта может быть сколь угодно сложной – изображение, кривые, штрихи и так далее. Чтобы превратить этот скромный базис в простую программу рисования, надо просто следить за событиями мыши. Я собираюсь использовать Script. aculo.us, коллекцию интерфейсных библиотек JavaScript, для отслеживания событий мыши, а код поставляется вместе с примером на сайте. Вы можете использовать любую подобную среду.
Цель этого примера – рисовать фигуру на холсте по щелчку мыши с помощью drawShape(). На текущий момент единственной фигурой является домик. Мы будем слушать любые щелчки мыши для id canvas.
function setupInteraction() {
currentDrawShape = house;
new Event.observe(
'canvas',
'click',
function(evt) {
ic.drawShape(currentDrawShape, {x : Event.pointerX(evt), y :
Event.pointerY(evt)});
}
);
}Вызов setupInteraction() в конце функции draw() позволяет помещать объекты на холст с помощью мыши. Пока от него мало проку, разве что вы затеяли нарисовать много-много домиков. Куда полезнее будет позволить пользователю самому выбирать из доступных фигур- шаблонов – как в Dia или OmniGraffe. На уровне кода, для того, чтобы изменить изображение, которое мы рисуем, достаточно изменить значение currentDrawImage. Поэтому, если вы добавите строку
currentDrawShape = eye;
в setupInteraction(), то будете рисовать глаза вместо домов.
Включим функцию addOption() для добавления фигуры в перечень шаблонов:
function addShapeOption(shape, name) {
shapeOptions[name] = shape;
$('slist').innerHTML += '<nowiki><li></nowiki><a href="#" onClick="currentDrawSh
ape = shapeOptions[\''+name+'\']; return false;">'+name+'</li>';
}Это хороший способ для пользователя выбрать текущий шаблон currentDrawShape, и все, что нам надо сделать для активации опции, это вызвать функцию
addShapeOption(theShapeObject, 'name of object');
В заключительной версии исходного кода на сайте каждая фигура сама добавляет себя в список, а пользователь может из него выбирать.
Тэг canvas будет одним из самых интересных добавлений в спецификацию HTML, c учетом огромного интереса к нему в так называемых средах Web 2.0. Ныне доступные примеры покамест довольно примитивны, но потенциал огромен. Уже создаются библиотеки для графиков, и комбинируя их с простыми действиями, можно добиться поразительных – и полезных приложений.
Ресурсы
- 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() создает путь отсечения так, что вы можете ограничить холст определенной фигурой, например, кругом или сложным многоугольником.
