Знайомство з jCanvas: JQuery і HTML5 Canvas

13

Від автора: в 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 документ.

This is fallback content
for users of assistive technologies
or of browsers that don’t have
full support for the Canvas API.

У коді вище варто звернути увагу на кілька речей:

За замовчуванням дозвіл поверхні, на якій можна малювати у тега 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: JQuery і HTML5 Canvas

Нижче демо прямокутника:

Дуги і кола

Дуга це частина обода кола. У 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.