Статьи

Введение в jCanvas: jQuery встречает HTML5 Canvas

Август 26, 2018

HTML5 позволяет рисовать графику прямо на веб-странице, используя элемент <canvas> и связанный с ним API-интерфейс JavaScript .

В этой статье я познакомлю вас с jCanvas , бесплатной библиотекой на основе jQuery с открытым исходным кодом для HTML5 Canvas API.

Если вы разрабатываете с помощью jQuery, jCanvas упрощает и ускоряет кодирование классных рисунков холста и интерактивных приложений с использованием синтаксиса jQuery.

Что такое jCanvas?

Сайт jCanvas объясняет:

jCanvas — это библиотека JavaScript, написанная с использованием jQuery и для jQuery, которая охватывает HTML5-интерфейс Canvas, добавляя новые функции и возможности, многие из которых можно настраивать. Возможности включают слои, события, перетаскивание, анимацию и многое другое.

Результатом является гибкий API, заключенный в сахаристый синтаксис jQuery-esque, который обеспечивает мощь и легкость холста HTML5.

jCanvas позволяет вам делать все, что вы можете делать с нативным API Canvas и многое другое. Если вы предпочитаете, вы также можете использовать собственные методы HTML5 Canvas API с jCanvas. Метод 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>

В последнем случае вы разместите свой собственный JavaScript-код с помощью jCanvas API. Теперь давайте возьмем jCanvas для тест-драйва.

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

Чтобы следовать примерам, начните с добавления <canvas> элемента <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> составляют 300 на 150 пикселей. Вы можете изменить этот размер по умолчанию в атрибутах width и height внутри разметки элемента.
  • Добавление атрибута id не требуется, но будет простым способом доступа к элементу с помощью JavaScript.
  • Содержимое внутри элемента <canvas> — это просто растровое изображение. Это делает его недоступным для пользователей вспомогательных технологий. Кроме того, браузеры, которые не поддерживают Canvas API , не смогут получить доступ к его контенту или каким-либо образом взаимодействовать с ним. Поэтому, хотя методы, направленные на то , чтобы сделать <canvas> более доступным , еще предстоит сделать доступными, рекомендуется добавить некоторый запасной контент для этой категории пользователей.

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

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

Переменная context в приведенном выше коде хранит ссылку на свойство 2D-контекста объекта Canvas. Именно это свойство позволяет вам получить доступ ко всем другим свойствам и методам, предоставляемым HTML5 Canvas API.

Если вы хотите узнать больше об этой теме, HTML5 Canvas Tutorial: Введение от Ивайло Герчева — отличная статья.

Методы и свойства jCanvas уже содержат ссылку на 2D-контекст, поэтому вы можете сразу перейти к рисованию.

Рисование фигур с помощью jCanvas

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

Давайте начнем с рисования прямоугольника.

Форма прямоугольника

Так вы рисуете прямоугольник с помощью метода drawRect() объекта jCanvas. 

 // Store the canvas object into a variable var $myCanvas = $('#myCanvas'); // rectangle shape $myCanvas.drawRect({ fillStyle: 'steelblue', strokeStyle: 'blue', strokeWidth: 4, x: 150, y: 100, fromCenter: false, width: 200, height: 100 });

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

  • fillStyle устанавливает цвет фона прямоугольника;
  • strokeStyle устанавливает цвет границы;
  • strokeWidth устанавливает ширину границы фигуры;
  • x и y устанавливают координаты, соответствующие горизонтальному и вертикальному положению прямоугольника внутри холста. Значение 0 для x и 0 для y , т. Е. (0, 0), соответствует верхнему левому углу холста. Координаты x увеличиваются вправо, а координаты y увеличиваются по направлению к нижней части холста. При рисовании прямоугольника по умолчанию jCanvas принимает координаты x и y чтобы они лежали в центре фигуры.
  • Чтобы изменить это так, чтобы x и y соответствовали верхнему левому углу прямоугольника, установите для свойства fromCenter значение false .
  • Наконец, свойства width и height задают размеры прямоугольника.

Прямоугольник, нарисованный на холсте с объяснением системы координат холста

Вот демонстрация с прямоугольной формой:

Дуги и круги

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

 $myCanvas.drawArc({ strokeStyle: 'steelblue', strokeStyle: 'blue', strokeWidth: 4, x: 300, y: 100, radius: 50, // start and end angles in degrees start: 0, end: 200 });

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

Вот демонстрация CodePen приведенного выше кода:

Рисовать круг так же просто, как и пропустить start и end свойства из drawArc() .

Например, вот как вы можете нарисовать простой рисунок улыбающегося лица, используя только формы дуг: 

 $myCanvas.drawArc({ // draw the face fillStyle: 'yellow', strokeStyle: '#333', strokeWidth: 4, x: 300, y: 100, radius: 80 }).drawArc({ // draw the left eye fillStyle: '#333', strokeStyle: '#333', x: 250, y: 70, radius: 5 }).drawArc({ // draw the right eye fillStyle: '#333', strokeStyle: '#333', x: 350, y: 70, radius: 5 }).drawArc({ // draw the nose strokeStyle: '#333', strokeWidth: 4, ccw: true, x: 300, y: 100, radius: 30, start: 0, end: 200 }).drawArc({ // draw the smile strokeStyle: '#333', strokeWidth: 4, x: 300, y: 135, radius: 30, start: 90, end: 280 });

Помните, что jCanvas основан на библиотеке jQuery, поэтому вы можете связывать методы jCanvas так же, как вы можете связывать методы jQuery.

Вот как приведенный выше код отображается в браузере:

Рисование линий и контуров

Вы можете быстро нарисовать линии с помощью jCanvas, используя метод drawLine() и нанести на 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 значение true , тем самым округляя углы линии и закрывая отслеживаемый путь.

Вы также можете рисовать гибкие пути, используя метод drawPath () . Думайте о пути как об одной или нескольких связанных линиях, дугах, кривых или векторах.

Метод drawPath() принимает карту точек и карту координат x и y для drawPath() внутри каждой точки. Вам также нужно указать тип пути, который вы собираетесь рисовать, например, линия, дуга и т. Д.

Вот как вы можете нарисовать пару соединенных горизонтально и вертикально указывающих стрелок, используя drawPath() и draw drawPath() , последний из которых представляет собой удобный метод jCanvas, который позволяет вам быстро нарисовать форму стрелки на холсте: 

 $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 } });

Координаты x и y каждого подпути связаны с координатами x и y всего пути.

И вот результат:

Рисование текста

Вы можете быстро нарисовать текст на холсте с метко названным методом 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 здесь .

Холст Слои

Если вы когда-либо использовали приложение для редактирования изображений, такое как Photoshop или Gimp, вы уже знакомы со слоями. Крутая часть работы со слоями заключается в том, что вы получаете возможность манипулировать каждым изображением на холсте индивидуально, рисуя его на своем собственном слое.

jCanvas предлагает мощный API-интерфейс слоев, который добавляет гибкость вашим проектам на основе холста.

Вот краткий обзор того, как использовать слои jCanvas.

Добавление слоев

Вы можете нарисовать только один объект на каждом слое. Вы можете добавить слои в свой проект jCanvas одним из двух способов:

  • Используйте метод addLayer() за которым следует метод drawLayers()
  • Установите для свойства layer значение true в любом из методов рисования

Вот как вы применяете первую технику, чтобы нарисовать синий прямоугольник. 

 $myCanvas.addLayer({ type: 'rectangle', fillStyle: 'steelblue', fromCenter: false, name: 'blueRectangle', x: 50, y: 50, width: 400, height: 200 }).drawLayers();

А вот как вы применяете второй метод для рисования того же прямоугольника: 

 $myCanvas.drawRect({ fillStyle: 'steelblue', layer: true, name: 'blueRectangle', fromCenter: false, x: 50, y: 50, width: 400, height: 200 });

Как видите, с каждым из вышеперечисленных мы получаем одинаковый результат.

В обоих приведенных выше примерах кода важно отметить, что у слоя есть имя, которое вы задаете с помощью свойства name . Это позволяет легко ссылаться на этот слой в коде и выполнять с ним все интересные вещи, такие как изменение значения индекса, его анимация, удаление и т. Д.

Посмотрим, как мы можем это сделать.

Анимационные слои

Вы можете быстро добавить анимацию к чертежам на основе слоев с помощью jCanvas, используя метод animateLayer () . Этот метод принимает следующие параметры:

  • Индекс или name слоя
  • Объект с парами ключ-значение свойств для анимации
  • Продолжительность анимации в миллисекундах. Это необязательный параметр, если он не установлен, по умолчанию он равен 400
  • Ослабление анимации. Это также необязательный параметр, если вы не установите его, по умолчанию используется swing
  • Необязательная функция обратного вызова, которая запускается после завершения анимации.

Давайте посмотрим на animateLayer() в действии. Мы нарисуем полупрозрачный оранжевый круг на слое, затем анимируем его свойства положения, цвета и непрозрачности: 

 // Draw circle $myCanvas.drawArc({ name: 'orangeCircle', layer: true, x: 50, y: 50, radius: 100, fillStyle: 'orange', opacity: 0.5 }); // Animate the circle layer $myCanvas.animateLayer('orangeCircle', { x: 150, y: 150, radius: 50, }, 1000, function(layer) { // Callback function $(this).animateLayer(layer, { fillStyle: 'darkred', x: 250, y: 100, opacity: 1 }, 'slow', 'ease-in-out'); });

Проверьте демо ниже, чтобы увидеть анимацию:

Вы можете просмотреть все три предыдущих примера в этой демонстрационной программе CodePen .

Draggable Layers

Еще одна интересная особенность, на которую я хотел бы обратить ваше внимание, — это возможность превратить обычный слой jCanvas в перетаскиваемый слой , просто установив для свойства draggable слоя значение true .

Вот как: 

 $myCanvas.drawRect({ layer: true, draggable: true, bringToFront: true, name: 'blueSquare', fillStyle: 'steelblue', x: 250, y: 150, width: 100, height: 100, rotate: 80, shadowX: -1, shadowY: 8, shadowBlur: 2, shadowColor: 'rgba(0, 0, 0, 0.8)' }) .drawRect({ layer: true, draggable: true, bringToFront: true, name: 'redSquare', fillStyle: 'red', x: 190, y: 100, width: 100, height: 100, rotate: 130, shadowX: -2, shadowY: 5, shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.5)' });

Приведенный выше фрагмент рисует два перетаскиваемых слоя прямоугольника, добавляя: draggable: true . Также обратите внимание на использование свойства bringToFront , которое гарантирует, что при перетаскивании слоя он автоматически перемещается вперед всех остальных существующих слоев.

Наконец, код поворачивает слои и устанавливает тень блока, просто чтобы показать, как вы можете быстро добавить эти эффекты к вашим чертежам jCanvas.

Результат выглядит так:

Пример перетаскиваемых слоев прямоугольника

Если вы хотите, чтобы ваше приложение делало что-то до, во время или после перемещения перетаскиваемого слоя, jCanvas позволяет легко сделать это, поддерживая функции обратного вызова во время соответствующих событий:

  • dragstart срабатывает, когда вы начинаете перетаскивать слой
  • drag огонь, как вы перетащите слой
  • dragstop срабатывает, когда вы прекращаете перетаскивать слой
  • dragcancel происходит, когда вы перетаскиваете слой за границу поверхности рисования холста.

Допустим, вы хотите отобразить сообщение на странице после того, как пользователь закончит перетаскивание слоя. Вы можете повторно использовать фрагмент кода выше, добавив функцию обратного вызова к событию dragstop , например так: 

 $myCanvas.drawRect({ layer: true, // Rest of the code as shown above... // Callback function dragstop: function(layer) { var layerName = layer.name; el.innerHTML = 'The ' + layerName + ' layer has been dropped.'; } }) .drawRect({ layer: true, // Rest of the code... // Callback function dragstop: function(layer) { var layerName = layer.name; el.innerHTML = 'The ' + layerName + ' layer has been dropped.'; } });

Перетаскивая каждый квадрат, вы увидите на странице сообщение о том, какой цветной квадрат вы только что уронили. Попробуйте это в демоверсии ниже:

Вывод

В этой статье я познакомил вас с jCanvas, новой библиотекой на основе jQuery, которая работает с HTML5 Canvas API. Я проиллюстрировал некоторые методы и свойства jCanvas, которые позволяют быстро рисовать на поверхности холста, добавлять визуальные эффекты, анимацию и перетаскиваемые слои.

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

В дополнение к этой статье я собрал базовое приложение рисования на CodePen с помощью метода drawLine() :

Не стесняйтесь делать это лучше, добавляя больше функций и обмениваясь результатами с сообществом SitePoint.

44
Share: