Знакомство с jCanvas: JQuery и HTML5 Canvas

Знакомство с jCanvas: JQuery и HTML5 Canvas

От автора: в HTML5 можно рисовать прямо на веб-странице при помощи тега canvas и относящегося к нему JavaScript API. В этой статье я познакомлю вас с jCanvas, бесплатной и open source библиотекой на JQuery, работающей с HTML5 Canvas API.

Если вы уже кодили на JQuery, вам будет легче разобраться в jCanvas, вы сможете почти сразу начать рисовать крутые вещи и интерактивные приложения на синтаксисе JQuery.

Что такое jCanvas?

Официальный сайт библиотеки разъясняет: «jCanvas – JavaScript библиотека, написанная на JQuery и для JQuery, которая вобрала в себя HTML5 canvas API и добавляет множестве новых функций и возможностей, большинство из которых настраиваемые. Среди возможностей есть слои, события, drag-and-drop, анимация и еще много чего. В результате получилось гибкое API, завернутое в JQuery синтаксис, облегчающее и усиливающее HTML5 canvas.»

jCanvas позволяет делать все то же самое, что можно осуществить с нативным Canvas API и даже больше. Также в jCanvas можно использовать стандартные методы из HTML5 Canvas API. Для этого есть метод draw(). Более того, jCanvas можно с легкостью расширить своими методами и свойствами при помощи метода extend().

Как добавить jCanvas в свой проект

Чтобы добавить jCanvas в свой проект, необходимо загрузить скрипт с официального сайта или со странички GitHub и разместить его в папке проекта. Выше уже упоминалось, что jCanvas требуется библиотека JQuery, так что не забудьте ее также скачать. Скрипты вашего проекта будут выглядеть так:

Последний это ваш собственный скрипт, использующий jCanvas API. Теперь давайте устроим тест драйв.

Настройка HTML документа

Сначала добавим тег canvas в стандартный HTML5 документ.

В коде выше стоит обратить внимание на пару вещей:

По умолчанию разрешение поверхности, на которой можно рисовать у тега canvas составляет 300px на 150px. Изменить данные значения можно в атрибутах width и height в разметке.

Атрибут с идентификатором не обязателен. Просто с его помощью легче получить доступ к элементу через JS.

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

Если бы вы использовали обычное Canvas API, то ваш JS код был бы примерно таким:

В переменной context хранится ссылка на свойство 2D контекста объекта Canvas. Это свойство открывает доступ ко всем другим свойствам и методам HTML5 Canvas API. В свойствах и методах jCanvas уже содержится ссылка на 2D контекст, поэтому вы можете сразу приступить к рисованию.

Как рисовать простые формы с помощью jCanvas

Большинство методов jCanvas принимает пару свойство/значение, данные пары можно располагать в любом порядке. Давайте нарисуем прямоугольник.

Прямоугольник

Ниже показан код для того, чтобы нарисовать прямоугольник. Используется метод drawRect() объекта jCanvas.

В коде выше в переменную $myCanvas заносится объект jCanvas. Свойства внутри метода drawRect() говорят сами за себя, но все же давайте разберем, что они означают:

fillStyle отвечает за фоновый цвет прямоугольника;

strokeStyle отвечает за цвет рамки;

strokeWidth отвечает за ширину рамки;

x и y устанавливают координаты прямоугольника по горизонтальной и вертикальной оси. Значение 0 для Х и 0 для У (0, 0) это левый верхний угол нашего холста. Координата Х двигает фигуру вправо, а У – вниз. По умолчанию в jCanvas координаты Х и У ведут отсчет от центра прямоугольника.

Чтобы точкой отсчета у фигуры стал левый верхний угол, необходимо задать свойству fromCenter значение false.

Ну а width и height это высота и ширина фигуры.

Ниже демо прямоугольника:

Дуги и окружности

Дуга это часть обода круга. В jCanvas нарисовать дугу можно, установив пару свойств в методе drawArc():

Так же как и для значений start и end необходимо задать значение свойства radius в градусах. Если хотите изменить направление дуги против часовой стрелки, добавьте свойство ccw: true.

Нарисовать круг можно, просто убрав свойства start и end в методе drawArc(). К примеру, ниже показано, как нарисовать смайлик только лишь из дуг и кругов:

Не забывайте, что jCanvas основан на JQuery библиотеке, т.е. в jCanvas можно сцеплять методы, как и в JQuery.

Как рисовать линии и пути

Линии можно рисовать с помощью свойства drawLine(), задав пары точек для построения.

Свойство rounded отвечает за скругленные углы, а свойство closed за замкнутость фигуры.

Также можно рисовать гибкие пути при помощи метода drawPath(). Путь это одна или несколько соединенных линий, дуг, кривых или векторов. Метод drawPath() принимает пары этапов и пары координат Х и У для каждого этапа. Также необходимо указать тип пути, т.е. линия, дуга и т.д. Ниже пример, как нарисовать соединенные между собой вертикальную и горизонтальную стрелки при помощи методов drawPath() и draw arrows(). Последний метод позволяет быстро нарисовать стрелку:

Координаты Х и У на каждом этапе относятся к Х и У всего пути.

Как рисовать текст

Нарисовать текст можно с помощью метода drawText(). Главные свойства:

text. Свойство отвечает за текст, к примеру, вы хотите написать ‘Hello world’

fontSize. Размер текста. Значение можно задать числом, которое jCanvas определит как пиксели: fontSize: 30. Можно использовать точки, но в таком случае необходимо значение указывать в кавычках и с единицами измерения: fontSize: ’30pt’

fontFamily задает семейство шрифтов для вашего текстового изображения: ‘Verdana, sans-serif’.

На странице в теге canvas это выглядит так:

Как рисовать изображения

С помощью метода drawImage() можно импортировать изображения и манипулировать ими. Ниже пример:

Поиграться со всеми демо можно в одном месте CodePen.

Canvas слои

Если вы хоть раз пользовались графическим редактором типа Photoshop или Gimp, то вы уже знаете, что такое слои. Основное преимущество слоев в том, что можно манипулировать каждым изображением по отдельности. У jCanvas есть мощное layer API, которое добавит гибкости вашему дизайну, основанному на canvas.

Автор: Maria Antonietta Perna

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (1)