С появлением таких инструментов, как Adobe Edge, и таких библиотек, как EaselJS, стало доступно больше ресурсов для разработчиков, желающих создавать интерактивный контент HTML5. Многие из этих инструментов предназначены специально для разработчиков Flash, чтобы сделать переход с ActionScript на HTML5 canvas более плавным. В этой статье дается обзор oCanvas, библиотеки HTML5, которую разработчики могут не только найти бесценной, но и очень простой в использовании.
HTML5 Canvas Background
Прежде чем мы углубимся в изучение oCanvas, давайте быстро определим, как работает HTML5 canvas. Если вы хотите более подробное объяснение того, как использовать HTML5 canvas, ознакомьтесь с этим руководством.
Если вы знаете ActionScript, вы уже знаете много JavaScript, и именно в этом заключается реальная сила при работе с canvas. Мы используем API рисования HTML5 для создания нашего контента вместе с хорошим старым JavaScript, чтобы сделать вещи интерактивными и динамичными. Но когда мы объединяем эти два подхода, подход к созданию нашего кода несколько отличается от того, к которому мы привыкли в ActionScript.
Короче говоря, чтобы использовать собственный API Canvas, мы рисуем пиксели в контексте рисования холста. Но главное, что нужно помнить, это то, что мы работаем со всем холстом, а не с одной нарисованной формой или изображением. Каждый раз, когда мы хотим изменить что-то нарисованное, мы должны перерисовать весь холст. Если мы хотим что-то анимировать, нам нужно многократно перерисовывать холст в нашем JavaScript, чтобы казалось, что все движется.
Это понятие очень похоже на традиционную анимацию, когда аниматоры должны рисовать каждую позу в своей последовательности и заставлять камеру перемещаться по ним очень быстро, чтобы имитировать движение. Но если вы привыкли к древовидным структурам, таким как DOM или список отображения в ActionScript, это понятие может быть сложно понять. Такой подход к полосканию и повторению программирования сильно отличается от работы с объектами для большинства разработчиков.
Представляем oCanvas
К счастью для тех из нас, кто так привык работать с объектами, oCanvas предлагает знакомый подход к холсту HTML5. oCanvas — это библиотека JavaScript, разработанная Йоханнесом Коггдалом с целью облегчить разработку с помощью HTML5 canvas. Он позволяет вам работать непосредственно с объектами, изменять их свойства и подключать к ним все события, одновременно обрабатывая мелкие мелочи за кулисами. Как лучше всего написал Йоханнес в своем блоге:
Моей целью всегда было сделать так, чтобы людям было действительно легко создавать вещи на основе предметов. Я определился с именем oCanvas как сокращение от «холст объекта».
Получить библиотеку
Чтобы начать использовать oCanvas, нам нужно включить копию библиотеки на нашу HTML-страницу. Мы можем либо ссылаться на файл, размещенный на CDN, либо сами размещать локальную копию. Перейдите на сайт oCanvas и вы можете скачать копию библиотеки или получить ссылку на версию, размещенную на CDN. Текущая версия 2.0 и была выпущена всего несколько недель назад, в которой исправлены многие ошибки, которые были в первоначальном выпуске. На сайте есть уменьшенная производственная версия, которую удобно использовать, когда вы готовы развернуть свой проект. Существует также версия для разработчиков, которая не распакована, но лучше для отладки. Мне нравится напрямую ссылаться на размещенную версию для более быстрой загрузки и кэширования браузером.
|
1
|
<script src=»http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.0.0/ocanvas.min.js»></script>
|
Начальная настройка кода
После того, как вы сделаете ссылку на oCanvas, нам нужно настроить элемент canvas в теле нашего HTML и создать ссылку на него для использования в нашем Javascript.
|
1
|
<canvas id=»canvas» width=»800″ height=»600″></canvas>
|
Как всегда, если вы разместите свой скрипт над элементом canvas, вам нужно обернуть его в функцию, чтобы вы знали, что DOM готов. Есть несколько способов пойти сюда. Вы можете либо создать свою собственную функцию, а затем вызвать ее в элементе тела при загрузке, например так:
|
1
2
3
4
5
|
function Main() {
// your oCanvas code
}
<body onload=»Main();»>
|
Или вы можете обернуть ваш код во встроенный метод domReady() . Это эквивалентно $(document).ready() jQuery. В oCanvas мы используем это:
|
1
2
3
|
oCanvas.domReady(function () {
//Your Code Here
});
|
Примечание. Вы можете использовать метод $(document).ready() jQuery, если хотите.
Инициализировать экземпляр oCanvas
Этот кусок кода абсолютно необходим и является первым, что вы должны написать при использовании oCanvas.
|
1
2
3
4
5
|
var canvas = oCanvas.create({
canvas: «#canvas»,
background: «#0cc»,
fps: 60
});
|
В этом коде мы храним ссылку на элемент canvas в нашем документе и получаем доступ к базовому экземпляру, который позволит вам начать создавать объекты. Метод create() принимает объект в качестве аргумента, который управляет работой oCanvas. Существует множество свойств, которые необходимо передать в метод create() , но единственным обязательным является свойство canvas: селектор CSS, который должен указывать на элемент canvas в DOM.
Другими свойствами, переданными в приведенном выше коде, являются свойства background и fps. Свойство background позволяет применять фон к холсту, который может быть цветовыми значениями CSS, градиентами и изображениями. Если он опущен, холст будет прозрачным. Свойство fps устанавливает количество кадров в секунду, при котором будет выполняться любая анимация. По умолчанию 30 кадров в секунду.
Примечание. Хотя мы рассматриваем многие функции oCanvas, я рекомендую ознакомиться с документацией библиотеки, чтобы лучше понять каждый раздел.
Показать объекты
Существует множество типов экранных объектов, которые вы можете создать с помощью oCanvas. Вы можете создавать такие фигуры, как прямоугольники, эллипсы, многоугольники и линии, а также изображения, текст и даже спрайт-листы. Для создания нового экранного объекта мы используем модуль отображения oCanvas и указываем, какой тип экранного объекта мы хотим создать, а также некоторые основные свойства — например, так:
|
1
2
3
4
5
6
7
|
var box = canvas.display.rectangle({
x: 50,
y: 150,
width: 50,
height: 50,
fill: «#000»
});
|
Затем, чтобы добавить его на экран, мы вызываем знакомый метод для вас, разработчиков Flash …
Добрый старый addChild ()
Да, старая, но хорошая вещь, которая делает добавление объектов в oCanvas привычным процессом. Чтобы добавить нашу коробку на холст, мы написали бы:
|
1
|
canvas.addChild(box);
|
Как и в ActionScript, addChild() добавляет указанный объект как addChild() вызывающей стороны. И, в свою очередь, x и y ребенка будут относительно его родителя. Таким образом, в этом случае мы делаем box дочерним для canvas, который мы могли бы упростить следующим образом:
|
1
|
box.add();
|
Метод add() также добавляет объект на холст — это то же самое, что и canvas.addChild (box). Но addChild() наиболее полезен для добавления объекта в качестве дочернего к уже созданному экранному объекту, например:
|
1
2
|
var square = canvas.display.rectangle({ x: 0, y: 0, width: 10, height: 10, fill: «#990000»});
box.addChild(square);
|
Давайте посмотрим на некоторые из различных типов экранных объектов, которые вы можете создать в oCanvas.
Формы
Вы уже видели квадрат, но мы можем использовать rectangle экранный объект для создания множества вещей. Вот прямоугольник с синим штрихом:
|
1
2
3
4
5
6
7
8
|
var rectangle = canvas.display.rectangle({
x: 500,
y: 100,
width: 100,
height: 200,
fill: «#000»,
stroke:»outside 2px blue»
});
|
Свойство fill может принимать любой допустимый цвет CSS, а также градиенты CSS и даже шаблоны изображений.
Чтобы создать эллипс, мы бы написали:
|
1
2
3
4
5
6
7
|
var ellipse = canvas.display.ellipse({
x: 100,
y: 100,
radius_x: 20,
radius_y: 30,
fill: «rgba(255, 0, 0, 0.5)»
});
|
Если вам нужен полный круг, просто замените свойства radius_x и radius_y одним свойством radius .
Создать любой тип правильного многоугольника так же просто — все, что вам нужно сделать, это указать количество сторон и радиус, который вы хотите, чтобы ваша фигура имела. Чтобы создать треугольник:
|
1
2
3
4
5
6
7
|
var triangle = canvas.display.polygon({
x: 320,
y: 145,
sides: 3,
radius: 50,
fill: «#406618»
});
|
Как насчет пятиугольника?
|
1
2
3
4
5
6
7
8
|
var pentagon = canvas.display.polygon({
x: 200,
y: 50,
sides: 5,
rotation: 270,
radius: 40,
fill: «#790000»
});
|
Чтобы достичь этого с помощью HTML5 canvas API, вам нужно будет нарисовать несколько путей и попытаться выяснить, в каких позициях x и y соединяться с ними. Я попытался нарисовать восьмиугольник для сравнения, но, как вы можете видеть ниже, я довольно легко сдался. Не совсем уверен, что это должно быть.
|
01
02
03
04
05
06
07
08
09
10
|
var canvas = $(«#canvas»);
var ctx = canvas.get(0).getContext(«2d»);
ctx.fillStyle = ‘#000’;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();
|
Картинки
Создание экранных объектов с изображениями не становится проще, чем в oCanvas. Просто укажите координаты x и y и путь к файлу изображения:
|
1
2
3
4
5
|
var tree = canvas.display.image({
x: 100,
y: 350,
image: «tree.png»
});
|
Приятной особенностью экранного объекта изображения является свойство tile , которое позволяет легко создавать сетку из одного и того же изображения, а не рисовать его снова и снова.
Текст
oCanvas содержит текстовый экранный объект и обрабатывает стили шрифтов, как CSS.
|
1
2
3
4
5
6
7
8
|
var text = canvas.display.text({
x: 70,
y: 300,
align: «center»,
font: «bold 18px sans-serif»,
text: «oCanvas Rocks»,
fill: «purple»
});
|
Вы можете использовать многие другие свойства текста, с которыми вы знакомы по CSS. Проверьте документацию по тексту для получения дополнительной информации.
Свойства и методы
Все экранные объекты наследуют общую группу свойств и методов. Некоторые из наиболее распространенных свойств x, y, width, height, rotation, scalingX, scalingY, opacity, shadow объекта: x, y, width, height, rotation, scalingX, scalingY, opacity, shadow (использует синтаксис CSS-box-shadow) и zIndex . Вы можете проверить эту ссылку для полного списка основных свойств и методов. Давайте посмотрим на некоторые другие заслуживающие внимания.
происхождения
Этот метод значительно экономит время, потому что он позволяет вам легко установить источник внутри объекта. Другими словами, он позволяет установить точку регистрации объекта. Если вы когда-либо пытались выполнить ротацию из центра с помощью HTML5 Canvas API, вы знаете, насколько сильной может быть головная боль. Вы должны выполнить множество действий, чтобы сохранить состояние чертежа, перевести холст, выполнить вращение и затем восстановить состояние чертежа. С помощью свойства origin вы можете легко определить происхождение объекта:
|
1
2
3
4
5
6
7
8
|
var obj = canvas.display.image({
x: 270,
y: 270,
origin: {
x: «center»,
y: «center»
}
});
|
Это будет рисовать изображение из его центра; если бы мы вращали объект, он бы тоже вращался из своего центра. Помимо «центра» вы также можете передать «влево» или «вправо» для х и «верх» или «низ» для позиций у. Помимо использования предопределенных ключевых слов, вы также можете указать положительные или отрицательные числа в качестве значений места рисования объекта. Источник по умолчанию для всех экранных объектов определяется в левом верхнем углу.
Вы также можете использовать метод setOrigin() в любое время, чтобы определить происхождение объекта:
|
1
|
obj.setOrigin(«left», «bottom»)
|
Я БЫ
Идентификатор экранного объекта, который действительно является свойством только для чтения, соответствует тому, где объект существует в списке рисования, который вы можете рассматривать как список отображения. Я нахожу это очень полезным, потому что он может служить уникальным идентификатором в определенных ситуациях, когда вы можете искать конкретный объект в вашем коде. Рассмотрим основной фрагмент, подобный этому:
|
1
2
3
4
5
|
getId(box.id)
function getId(id) {
if (id==9) console.log(«CORRECT ! » + id)
else console.log(«WRONG! » + id)
}
|
Сочинение
Свойство композиции является эквивалентом globalCompositeOperation в собственном Canvas API. Если вы не знакомы с ним, он в основном определяет, как пиксели отображаются при рисовании на уже существующие пиксели на холсте. Я рекомендую вам ознакомиться с различными операциями компоновки, которые вы можете установить, но с помощью oCanvas вы можете просто установить нужную операцию, передав ее в виде строки:
|
1
2
3
4
5
6
7
8
|
var shape = canvas.display.rectangle({
x: 270,
y: 270,
width: 180,
height: 80,
fill: «#ff6900»,
composition:»destination-atop»
});
|
Есть много разных операций, которые вы можете передать, но я думаю, что одна из полезных вещей, которые вы можете сделать со свойством составления, это создать маски между различными экранными объектами. Проверьте файл с именем masks.html в пакете загрузки. Если вы когда-либо полагались на создание масок слоев в своих приложениях Flash, вам понравится это.
Методы примечания
Поскольку мы упоминали вращающиеся объекты ранее, вы можете быстро повернуть объект с помощью методов rotate() и rotateTo() :
|
1
|
obj.rotate(45);
|
Вы также можете просто установить свойство вращения:
|
1
|
obj.rotation=45;
|
Существуют также методы move() и moveTo() которые, как и предполагают их имена, позволяют перемещать объект на указанное количество пикселей для первого и на указанную позицию x и y для второго.
|
1
|
obj.moveTo(100, 100)
|
Та же идея работает для методов scale() и scaleTo() ():
|
1
2
|
obj.scale(1.25, 0.25)
obj.scaleTo(1.5, 1.5)
|
Мы упоминали addChild() раньше; давайте не будем забывать о removeChild() и removeChildAt() . И как метод add() , мы можем сделать противоположное с помощью remove() .
Другим действительно полезным методом является clone() , который позволяет дублировать экранный объект и все его свойства.
|
1
2
|
var box = canvas.display.rectangle({ x: 50, y: 150, width: 50, height: 50, fill: «#000»});
var box2 = box.clone(x:200)
|
События
Большим плюсом oCanvas является то, что вы можете добавлять события к определенным объектам. OCanvas содержит множество методов и свойств для простой обработки событий мыши, клавиатуры и даже касаний одним простым методом.
Bind ()
Если вы знакомы с jQuery, вы, вероятно, уже знаете, куда я иду с этим.
|
1
2
3
|
canvas.bind(«click tap», function () {
canvas.background.set(«#efefef»);
});
|
Все, что это делает, это меняет цвет фона холста, но обратите внимание на то, как мы передаем «щелчок», что позволяет нам легко добавлять поддержку как для мыши, так и для сенсорных устройств.
Помимо событий щелчка, вы также можете прослушивать другие события мыши: mousedown, mouseup, mousemove, mouseenter, mouseleave и dblclick.
Простой эффект ролловера может выглядеть так:
|
1
2
3
4
5
|
box.bind(«mouseenter», function () {
canvas.background.set(«#333»);
}).bind(«mouseleave», function () {
canvas.background.set(«#000»);
});
|
Это пример функций цепочки — которые (не звучат как неработающая запись) — еще одна особенность jQuery, используемая в oCanvas.
Но вместо того, чтобы изменять холст, когда происходит событие мыши, как насчет изменения реального экранного объекта? В конце концов, это все еще HTML5-холст, поэтому мы должны не забывать вызывать важный метод, чтобы сообщить холсту об обновлении.
canvas.redraw ()
Метод redraw() (который на самом деле является частью модуля Draw, а не модуля Events) перерисовывает холст со всеми экранными объектами, которые были добавлены. Поэтому, если вы хотите выполнить действие с конкретным объектом и оставить остальную часть списка отрисовки без изменений, мы должны добавить эту простую строку кода в наши функции:
|
1
2
3
4
|
square.bind(«click tap», function () {
square.x+=50;
canvas.redraw();
});
|
Unbind ()
Что хорошего в слушателе событий, если мы не можем его удалить?
|
1
2
3
4
5
6
|
rectangle.bind(«click tap», function onClick ()
{
this.fill=»#FF9933″;
canvas.redraw();
rectangle.unbind(«click tap», onClick)
});
|
Как насчет быстрого перетаскивания?
Нам не нужен метод bind() для этого. Мы просто пишем:
|
1
|
circle.dragAndDrop();
|
Это, вероятно, самый быстрый и простой код перетаскивания, который вы когда-либо будете писать.
Примечание к событиям. Когда вы работаете с событиями, естественно хотеть получить как можно больше информации о событии. К счастью, мы можем сделать это при работе с oCanvas. Например, если мы возьмем обработчик клика на несколько строк вверх и зарегистрируем событие в консоли, мы сможем увидеть все свойства, которые мы имеем из события.
|
1
2
3
4
5
6
7
|
rectangle.bind(«click tap», function onClick (e)
{
this.fill=»#FF9933″;
canvas.redraw();
rectangle.unbind(«click tap», onClick);
console.log(e);
});
|
Клавиатура и сенсорные события
Помимо событий мыши, в oCanvas есть целые модули, посвященные событиям клавиатуры и касания, со своими уникальными методами и свойствами. Эти события также обрабатываются методом bind() . Система событий в oCanvas — очень широкая тема, поэтому я рекомендую взглянуть на раздел событий в документации и поэкспериментировать.
График
С помощью модуля временной шкалы мы можем настроить наш основной цикл для нашего приложения. Если бы вы создавали игру, по сути это был бы игровой цикл . Мне нравится думать об этом как эквивалент ENTER_FRAME во Flash.
Это просто установить — мы просто вызываем функцию setLoop и setLoop с ней метод start() :
|
1
2
3
|
canvas.setLoop(function () {
triangle.rotation+=5;
}).start();
|
Если бы мы хотели привязать setLoop() к событию, скажем, щелчком мыши, мы могли бы сделать что-то вроде этого:
|
1
2
3
4
5
6
7
|
canvas.setLoop(function () {
triangle.rotation+=5;
})
button.bind(«click tap», function () {
canvas.timeline.start()
});
|
И мы могли бы остановить график, просто позвонив:
|
1
|
canvas.timeline.stop();
|
Анимация
Использование setLoop() — это способ использовать анимацию, которая будет происходить в течение длительного периода времени, и обрабатывать постоянные обновления, которые вы должны выполнять во всем приложении. Но oCanvas имеет встроенные методы для обработки более простых и простых анимаций, которые обычно необходимы. Эти методы также практически дословно взяты из jQuery.
Одушевленное ()
Метод animate() работает так же, как и в jQuery. Если вы не знакомы с этой стороной jQuery, подумайте, нравится ли она движку анимации, например TweenMax или Tweener for Flash. Вы можете анимировать любое свойство, которое можно установить с помощью числового значения:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
circle.animate(
{
y: circle.y — 300,
scalingX:.5,
scalingY: .5
},
«short»,
«ease-in»,
function () {
circle.fill = «#45931e»;
canvas.redraw();
}
);
|
Здесь мы анимируем положение y круга и общий размер, применяем некоторое смягчение, а когда оно заканчивается, мы запускаем функцию обратного вызова, которая меняет цвет заливки. Но не забудьте вызвать redraw() .
fadeIn() , fadeOut() и fadeTo()
Чтобы исчезнуть и исчезнуть объект, мы можем просто вызвать:
|
1
2
|
square.fadeIn();
square.fadeOut();
|
Чтобы уменьшить прозрачность до определенного значения, мы использовали бы fadeTo() :
|
1
|
square.fadeTo(.6);
|
Вы также можете определить длительность, замедление и предоставить функцию обратного вызова для этих методов так же, как и в методе animate() .
Сцены
oCanvas содержит очень полезный модуль Scenes, который позволяет вам легко разделить ваше приложение на разные состояния. Разработчики игр могут оценить это, потому что это простой способ разбить вашу игру на несколько частей. Даже аниматоры Flash старой школы могут сравнить модуль Scenes с панелью Scenes, которая позволяет буквально создавать различные сцены в проекте Flash.
Чтобы создать сцену в oCanvas, мы вызываем метод create() для возврата объекта scenes :
|
1
2
3
|
var intro = canvas.scenes.create(«intro», function () {
// add display objects here
});
|
В методе create() мы передаем два аргумента: имя сцены в виде строки и функцию, в которую мы добавляем экранный объект, который мы хотим добавить в эту сцену.
|
01
02
03
04
05
06
07
08
09
10
11
|
var introText = canvas.display.text({
x: canvas.width / 2,
y: canvas.height/2,
align: «center»,
font: «bold 36px sans-serif»,
text: «Introduction»,
fill: «#133035»
});
var intro = canvas.scenes.create(«intro», function () {
this.add(introText);
});
|
Теперь мы должны загрузить нашу сцену, и эти объекты будут добавлены на дисплей:
|
1
|
canvas.scenes.load(«intro»);
|
Обратите внимание, что мы передаем имя, которое дали сцене, когда создавали ее.
И, конечно, мы можем выгрузить сцену в любое время:
|
1
|
canvas.scenes.unload(«intro»);
|
Представьте себе, насколько это сэкономило бы время, если бы вы использовали сцены и обработчики событий вместе.
oCanvas vs. EaselJS
Единственный реальный недостаток oCanvas — это то, что он не получил такого большого влияния в сообществе разработчиков, как вы можете догадаться — или, по крайней мере, пока так кажется. Я думаю, что отчасти это объясняется популярностью EaselJS. Похоже, что у EaselJS гораздо больше осведомленности и ресурсов, чем у oCanvas — в это трудно поверить, поскольку последний был впервые выпущен в марте 2011 года, но по какой-то причине он попал под радар.
Я использую обе библиотеки уже довольно давно, и могу честно сказать, что я большой поклонник обеих. EaselJS определенно чувствует, что вы используете ActionScript, и если вы разработчик Flash, вам будет легко его освоить. И, как мы видели, oCanvas может сойти за давно потерянного брата jQuery во многих отношениях. Поэтому, если вы чистый ActionScripter, вы можете просто стремиться к EaselJS, особенно с учетом того, что Easel был написан специально для разработчиков Flash.
Тем не менее, я использую Actionscript намного дольше, чем jQuery, и лично я нахожу oCanvas более простым в использовании и менее многословным для написания. И хотя EaselJS довольно прост в использовании, простой синтаксис в oCanvas просто делает его таким желанным инструментом.
Но кроме более простого синтаксиса, oCanvas и EaselJS во многом взаимозаменяемы. Обе библиотеки могут выполнять более или менее одинаковые задачи, и разница в производительности очень мала, если таковая имеется. Однако я заметил, что функция Ticker в EaselJS работает немного более плавно, чем функция setLoop (хотя это может быть просто разницей в браузере).
У EaselJS гораздо более обширный API — особенно когда дело доходит до рисования и эффектов. И если принять во внимание TweenJS и SoundJS, Easel, безусловно, является более полным инструментом, особенно если вы привыкли использовать такое приложение, как Flash, которое обеспечивает точную настройку ваших проектов. Но если вы новичок во всей HTML5-игре, вы, скорее всего, начнете работать с oCanvas намного быстрее. Когда я впервые познакомился с oCanvas, мне было очень весело играть. Все уже там для вас — все необходимые методы и события, чтобы начать создавать, манипулировать и анимировать объекты прямо сейчас.
Завершение
Какую бы библиотеку вы ни предпочли, oCanvas и EaselJS — это только начало того, что, я думаю, станет притоком инструментов и ресурсов, которые позволят разработчикам легко создавать приложения на основе браузера. Особенности oCanvas, описанные в этой статье, едва касаются поверхности того, что может быть создано с помощью этой очень мощной библиотеки.
Тем не менее, oCanvas (или любая другая библиотека в этом отношении) ни в коем случае не является причиной, чтобы не изучать и не использовать собственный HTML5-интерфейс Canvas. Но если вы оказались в ситуации, когда все ваши бывшие клиенты Flash теперь ищут, чтобы вы создавали приложения HTML5 (как, например, мои), и у вас нет времени на изучение чего-то вроде недружественной матрицы преобразования в нативном API Canvas — oCanvas может определенно облегчить кривую обучения.