Знакомство с 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, так что не забудьте ее также скачать. Скрипты вашего проекта будут выглядеть так:

<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 документ.

<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 код был бы примерно таким:

var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d');

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

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

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

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

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

// сохраняем объект 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():

$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(). К примеру, ниже показано, как нарисовать смайлик только лишь из дуг и кругов:

$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(), задав пары точек для построения.

$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(). Последний метод позволяет быстро нарисовать стрелку:

$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’.

$myCanvas.drawText({
  text: 'Canvas is fun',
  fontFamily: 'cursive',
  fontSize: 40,
  x: 290, y: 150,
  fillStyle: 'lightblue',
  strokeStyle: 'blue',
  strokeWidth: 1
});

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

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

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

$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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree