От автора: в 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, так что не забудьте ее также скачать. Скрипты вашего проекта будут выглядеть так:
1 2 3 |
<script src="js/jquery.min.js></script> <script src="js/jcanvas.min.js></script> <script src="js/script.js></script> |
Последний это ваш собственный скрипт, использующий jCanvas API. Теперь давайте устроим тест драйв.
Настройка HTML документа
Сначала добавим тег canvas в стандартный HTML5 документ.
1 2 3 4 5 6 |
<canvas id="myCanvas" width="600" height="300"> <p>This is fallback content for users of assistive technologies or of browsers that don't have full support for the Canvas API.</p> </canvas> |
В коде выше стоит обратить внимание на пару вещей:
По умолчанию разрешение поверхности, на которой можно рисовать у тега canvas составляет 300px на 150px. Изменить данные значения можно в атрибутах width и height в разметке.
Атрибут с идентификатором не обязателен. Просто с его помощью легче получить доступ к элементу через JS.
Внутри тега canvas находится обычное растровое изображение, и оно не доступно для пользователей с ограниченными возможностями. Также браузер без поддержки Canvas API не сможет получить доступ к контенту внутри тега и каким-либо образом с ним взаимодействовать. Таким образом, пока все техники, которые пытаются сделать тег canvas более доступным, не станут сами доступными, для пользователей на старых браузерах желательно добавлять какой-либо фолбэк.
Если бы вы использовали обычное Canvas API, то ваш JS код был бы примерно таким:
1 2 |
var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'); |
В переменной context хранится ссылка на свойство 2D контекста объекта Canvas. Это свойство открывает доступ ко всем другим свойствам и методам HTML5 Canvas API. В свойствах и методах jCanvas уже содержится ссылка на 2D контекст, поэтому вы можете сразу приступить к рисованию.
Как рисовать простые формы с помощью jCanvas
Большинство методов jCanvas принимает пару свойство/значение, данные пары можно располагать в любом порядке. Давайте нарисуем прямоугольник.
Прямоугольник
Ниже показан код для того, чтобы нарисовать прямоугольник. Используется метод drawRect() объекта jCanvas.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// сохраняем объект jCanvas в переменную var $myCanvas = $('#myCanvas'); // сам прямоугольник $myCanvas.drawRect({ fillStyle: 'steelblue', strokeStyle: 'blue', strokeWidth: 4, x: 150, y: 100, fromCenter: false, width: 200, height: 100 }); |
В коде выше в переменную $myCanvas заносится объект jCanvas. Свойства внутри метода drawRect() говорят сами за себя, но все же давайте разберем, что они означают:
fillStyle отвечает за фоновый цвет прямоугольника;
strokeStyle отвечает за цвет рамки;
strokeWidth отвечает за ширину рамки;
x и y устанавливают координаты прямоугольника по горизонтальной и вертикальной оси. Значение 0 для Х и 0 для У (0, 0) это левый верхний угол нашего холста. Координата Х двигает фигуру вправо, а У – вниз. По умолчанию в jCanvas координаты Х и У ведут отсчет от центра прямоугольника.
Чтобы точкой отсчета у фигуры стал левый верхний угол, необходимо задать свойству fromCenter значение false.
Ну а width и height это высота и ширина фигуры.
Ниже демо прямоугольника:
Дуги и окружности
Дуга это часть обода круга. В jCanvas нарисовать дугу можно, установив пару свойств в методе drawArc():
1 2 3 4 5 6 7 8 9 |
$myCanvas.drawArc({ strokeStyle: 'steelblue', strokeStyle: 'blue', strokeWidth: 4, x: 300, y: 100, radius: 50, // начальный и конечный углы в градусах start: 0, end: 200 }); |
Так же как и для значений start и end необходимо задать значение свойства radius в градусах. Если хотите изменить направление дуги против часовой стрелки, добавьте свойство ccw: true.
Нарисовать круг можно, просто убрав свойства start и end в методе drawArc(). К примеру, ниже показано, как нарисовать смайлик только лишь из дуг и кругов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$myCanvas.drawArc({ // рисуем лицо fillStyle: 'yellow', strokeStyle: '#333', strokeWidth: 4, x: 300, y: 100, radius: 80 }).drawArc({ // левый глаз fillStyle: '#333', strokeStyle: '#333', x: 250, y: 70, radius: 5 }).drawArc({ // правый глаз fillStyle: '#333', strokeStyle: '#333', x: 350, y: 70, radius: 5 }).drawArc({ // нос strokeStyle: '#333', strokeWidth: 4, ccw: true, x: 300, y: 100, radius: 30, start: 0, end: 200 }).drawArc({ // улыбка strokeStyle: '#333', strokeWidth: 4, x: 300, y: 135, radius: 30, start: 90, end: 280 }); |
Не забывайте, что jCanvas основан на JQuery библиотеке, т.е. в jCanvas можно сцеплять методы, как и в JQuery.
Как рисовать линии и пути
Линии можно рисовать с помощью свойства drawLine(), задав пары точек для построения.
1 2 3 4 5 6 7 8 9 10 |
$myCanvas.drawLine({ strokeStyle: 'steelblue', strokeWidth: 10, rounded: true, closed: true, x1: 100, y1: 28, x2: 50, y2: 200, x3: 300, y3: 200, x4: 200, y4: 109 }); |
Свойство rounded отвечает за скругленные углы, а свойство closed за замкнутость фигуры.
Также можно рисовать гибкие пути при помощи метода drawPath(). Путь это одна или несколько соединенных линий, дуг, кривых или векторов. Метод drawPath() принимает пары этапов и пары координат Х и У для каждого этапа. Также необходимо указать тип пути, т.е. линия, дуга и т.д. Ниже пример, как нарисовать соединенные между собой вертикальную и горизонтальную стрелки при помощи методов drawPath() и draw arrows(). Последний метод позволяет быстро нарисовать стрелку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$myCanvas.drawPath({ strokeStyle: '#000', strokeWidth: 4, x: 10, y: 10, p1: { type: 'line', x1: 100, y1: 100, x2: 200, y2: 100 }, p2: { type: 'line', rounded: true, endArrow: true, arrowRadius: 25, arrowAngle: 90, x1: 200, y1: 100, x2: 290, y2: 100 }, p3: { type: 'line', rounded: true, endArrow: true, arrowRadius: 25, arrowAngle: 90, x1: 100, y1: 100, x2: 100, y2: 250 } }); |
Координаты Х и У на каждом этапе относятся к Х и У всего пути.
Как рисовать текст
Нарисовать текст можно с помощью метода drawText(). Главные свойства:
text. Свойство отвечает за текст, к примеру, вы хотите написать ‘Hello world’
fontSize. Размер текста. Значение можно задать числом, которое jCanvas определит как пиксели: fontSize: 30. Можно использовать точки, но в таком случае необходимо значение указывать в кавычках и с единицами измерения: fontSize: ’30pt’
fontFamily задает семейство шрифтов для вашего текстового изображения: ‘Verdana, sans-serif’.
1 2 3 4 5 6 7 8 9 |
$myCanvas.drawText({ text: 'Canvas is fun', fontFamily: 'cursive', fontSize: 40, x: 290, y: 150, fillStyle: 'lightblue', strokeStyle: 'blue', strokeWidth: 1 }); |
На странице в теге canvas это выглядит так:
Как рисовать изображения
С помощью метода drawImage() можно импортировать изображения и манипулировать ими. Ниже пример:
1 2 3 4 5 6 7 8 |
$myCanvas.drawImage({ source: 'imgs/cat.jpg', x: 250, y: 100, fromCenter: false, shadowColor: '#222', shadowBlur: 3, rotate: 40 }); |
Поиграться со всеми демо можно в одном месте CodePen.
Canvas слои
Если вы хоть раз пользовались графическим редактором типа Photoshop или Gimp, то вы уже знаете, что такое слои. Основное преимущество слоев в том, что можно манипулировать каждым изображением по отдельности. У jCanvas есть мощное layer API, которое добавит гибкости вашему дизайну, основанному на canvas.
Автор: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Комментарии (1)