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


Содержание материала:

HTML5 Canvas — анимация

Нарисовать одну картинку может казаться достаточно обескураживающей задачей. Поэтому не удивительно, что даже закаленные веб-разработчики рассматривают с определенным трепетом идею рисования нескольких десятков изображений каждую секунду. Основная трудность с анимацией состоит в необходимости обновлять отображение содержимого холста достаточно быстро, чтобы оно выглядело натурально движущимся или изменяющимся.

Анимация — это очевидная и необходимая составная часть для определенных типов приложений, таких как игры в режиме реального времени и эмуляторы физических процессов. Но для намного более широкого диапазона страниц на основе холста лучше применять более простые типы анимации. Так, анимацию можно использовать для выделения действий пользователя, например, подсвечивать фигуру при наведении на нее курсора мыши или заставлять ее пульсировать или мерцать.

Анимацию также можно использовать для привлечения внимания к изменениям содержимого, например, постепенно вводить новый вид или создавать графики и диаграммы, «вырастающие» в требуемую позицию. Такие способы использования анимации являются мощным средством для придания глянца веб-приложениям.

Простая анимация

Сделать анимацию из элемента на холсте HTML5 достаточно просто. Для этого устанавливается таймер, который постоянно вызывает элемент, обычно 30 или 40 раз в секунду. При каждом вызове код полностью обновляет содержимое всего холста. Если код написан правильно, постоянно сменяющиеся кадры сольются в плавную, реалистичную анимацию.

JavaScript предоставляет два способа для управления этим повторяющимся обновлением содержимого холста:

Функция setTimeout()

Эта функция дает указание браузеру подождать несколько миллисекунд, а потом исполнить фрагмент кода, в данном случае код для обновления содержимого холста. По окончании исполнения кода функция setTimeout() выполняется опять, вновь вызывая код обновления холста, и так до тех пор, пока анимацию не нужно завершить.

Функция setInterval()

Эта функция дает указание браузеру исполнять фрагмент кода через регулярный интервал времени, например каждые 20 мс. Эффект от этой функции, по большому счету, такой же, как и от функции setTimeout(), но функцию setInterval() нужно вызывать только один раз. Чтобы остановить повторяющийся вызов кода браузером, исполняется функция clearInterval().

Если код рисования быстрый и эффективный, обе функции дают одинаковый эффект. В противном случае функция setInterval() даст лучший результат, выполняя обновление точно в требуемое время, но, возможно, за счет производительности. При худшем стечении обстоятельств, когда исполнение кода рисования занимает несколько больше времени, чем установленный интервал, браузер будет напрягаться, чтобы поспевать, код рисования будет исполняться постоянно и страница может на мгновение зависать.

При вызове функции setTimeout() передаются два параметра: название функции, которою нужно выполнить, и период времени ожидания перед исполнением этой функции. Время ожидания указывается в миллисекундах (т.е. тысячных секунды), таким образом, 20 мс (обычная задержка при анимации) равняется 0,02 с. Далее показан пример такого кода анимации с использованием функции setTimeout():

Этот вызов функции setTimeout() является ключевой частью любой задачи анимации. Допустим, что мы хотим создать анимацию квадрата, падающего сверху вниз страницы. Для этого нам нужно отслеживать позицию квадрата, используя две глобальные переменные. После нам надо просто изменять позицию при каждом исполнении функции drawFrame(), а потом перерисовывать квадрат в новой позиции:

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

Для более утонченной анимации потребуются более сложные вычисления. Например, предыдущий пример можно немного усложнить, ускоряя падение квадрата, чтобы эмулировать силу притяжения, или отскакивать от «пола», для чего потребуются более сложные математические расчеты, чем для единообразного движения вниз. Но основной подход — установка таймера, вызов функции рисования и обновление содержимого всего холста — остается точно таким же.

Анимация нескольких объектов

Теперь, когда мы освоили основы анимации и рисования интерактивной графики на холсте, настало время сделать следующий шаг и совместить эти навыки. Сделаем мы это на примере программы анимации падающих «мячиков», как показано на рисунке ниже:

Эта программа анимации позволяет добавлять в холст неограниченное количество мячиков. Программа предоставляет опцию выбора размера мячика (радиус по умолчанию — 15 пикселов) и соединения мячиков линиями, как показано справа на рисунке. Каждый добавленный в холст мячик двигается независимо от других, падая с ускорением, пока не столкнется с нижним краем холста, потом отскакивает от него и начинает двигаться в другом направлении.

В этой программе используется уже знакомый нам по предыдущему разделу метод setTimeout(), но сейчас код рисования должен управлять практически неограниченным количеством падающих мячиков.

Добавьте базовую разметку для примера:

Для управления всеми этими шариками мы воспользуемся пользовательским объектом. В данном случае нам нужно отслеживать массив объектов Ball и кроме позиции (представляемой свойствами x и y) для каждого мячика нужно еще отслеживать и скорость (представляемую свойствами dx и dy):

В математике выражение dx обозначает скорость изменения абсциссы, а dy — скорость изменения ординаты. Поэтому по мере падения мячика значение x для каждого кадра увеличивается на величину dx, а значение y — на величину dy.

При нажатии кнопки «Добавить мячик» простой код создает новый объект Ball и сохраняет его в массиве balls:

Кроме очистки холста, кнопка «Очистить холст» также очищает массив balls:

Но ни функция addBall(), ни функция clearBalls() в действительности не только ничего не рисуют, но даже не вызывают функцию для рисования. Вместо этого код страницы устроен таким образом, чтобы вызывать функцию drawFrame(), которая прорисовывает холст каждые 20 мс:

Функция drawFrame() является ключевой частью этого примера. Она не только рисует мячики на холсте, но также и вычисляет их текущую позицию и скорость. В функции drawFrame() выполняется несколько разных вычислений, чтобы более реалистично эмулировать движение мячиков, например, ускорение мячиков при падении и замедление, когда они отскакивают от препятствий. Полный код функции выглядит так:

Хотя весь этот объем кода может вызывать легкий страх, общий подход остался прежним. Код исполняет следующие операции:

Перебирает в цикле мячики в массиве.

Корректирует позицию и скорость каждого мячика.

Рисует каждый мячик на холсте.

Устанавливает время ожидания (функция setTimeout) для вызова метода drawFrame() опять 20 мс.

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

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

Довольно впечатляющую версию этого примера, можно исследовать на странице HTML5 Canvas Google Bouncing Balls. Здесь наведение курсора мыши на мячики разбрасывает их в разные стороны (как именно, зависит от того, каким образом наводится на них курсор), а если отвести курсор, мячики собираются в слово «Google».

Производительность анимации

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

В современных браузерах применяются такие средства повышения производительности, как аппаратное ускорение, при котором определенный объем обработки графики передается видеокарте компьютера, вместо применения центрального процессора для выполнения всех задач. И хотя JavaScript — не самый быстрый из языков программирования, на нем вполне можно создавать сложные высокоскоростные анимации, включая аркадные игры в режиме реального времени, не используя ничего, кроме кода сценариев и холста.

Но производительность холста может быть проблемой в случае маломощных мобильных устройств, таких как iPhone или устройства с операционной системой Android. Результаты тестов показывают, что анимация, которая может выполняться на настольном компьютере со скоростью 60 кадр/с (кадров в секунду), будет исполняться на среднем смартфоне рывками, с максимальной скоростью 10 кадр/с.

Поэтому, если вы хотите создавать приложения для мобильных устройств, прежде чем углубляться в разработку, обязательно протестируйте их производительность для таких устройств и будьте готовы пожертвовать некоторыми второстепенными украшениями анимационной программы, чтобы ее основная функция работала без проблем.

Анимация на холсте для ленивых

Мне действительно нужно выполнять все вычисления самому?

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

А если требуется анимировать одновременно несколько предметов разными способами, объем и сложность необходимых для этого вычислений могут очень быстро выйти из под контроля. Поэтому намного легче жизнь разработчиков, использующих подключаемый модуль, такой как Flash или Silverlight. Обе технологии имеют встроенную систему анимации, которая позволяет разработчикам давать команды наподобие «переместить эту фигуру из этой точки в ту за 45 секунд» или, еще лучше, «переместить эту фигуру от верхнего края окна к нижнему, применяя эффект ускорения, вследствие которого фигура слегка отскакивает, достигнув нижнего края».

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

Топ-пост этого месяца:  Как добавить слайдер на страницу записи

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

Сегодня я хотел бы начать рассмотрение HTML5 canvas — встроенной возможности современных браузеров для работы с растровой графикой.

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

В этой статье я расскажу, что такое canvas, как он работает, и покажу как рисовать простые фигуры, менять цвета и стирать нарисованное.

Поддержка браузерами

Все современных браузеры, включаю Internet Explorer 9, поддерживают canvas:

  • Internet Explorer 9.0+;
  • Safari 3.0+;
  • Firefox 3.0+;
  • Chrome 3.0+;
  • Opera 10.0+;
  • iOS 1.0+;
  • Android 1.0+.

Стоит заметить, что основную функциональность canvas можно использовать и в IE 8 и младше с помощью плагина Explorer Canvas.

Архитектура canvas

С одной стороны, canvas это всего лишь HTML5 тег с указанными размерами и каким-то id (для обращения к элементу в дальнейшем):

После этого вы получите место (прозрачный холст) указанных размеров на странице, в котором в дальнейшем можно будет что-то рисовать. Обратите внимание, что указывать размеры canvas необходимо через аттрибуты тега width и height . Если вы укажите размеры через CSS, то пропорции элементов внутри canvas будут искажены.

С другой стороны, указанный тег — только часть технологии. Все операции происходят в так называемом двумерном контексте (2D Rendering Context), который содержится в каждом теге . По сути, двумерный контекст — это прямоугольная система координат:

Единица измерения — один пиксел. Для работы с двумерным контекстом, и, соответсвенно, выполнения операций по рисованию, необходим JavaScript.

Начало работы

Для начала нам необходимо подключить плагин Explorer Canvas для IE strokeStyle , а за заливку — fillStyle . Давайте укажем, что мы хотим красный цвет (#FF0000) и толщину в 3 пиксела для обводки и зеленый цвет (#00FF00) для заливки:

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

В canvas есть два вида прямоугольников — залитые и незалитые (обводка). Залитый прямоугольник рисуется с помощью метода fillRect(x, y, width, height) :

А незалитый — strokeRect(x, y, width, height) :

Линии

В canvas можно рисовать не только прямые линии, но и изогнутые, окружности и так далее. Замкнутые линии можно заливать цветом.

В отличии от рисования прямоугольников, рисование линий это не одна команда, а их последовательность. Так, сначала надо объявить начало новой линии с помощью beginPath() , а в конце сказать от том, что рисование линии заканчивается с помощью closePath() .

У каждого отрезка линии есть начало и конец. Давайте нарисуем ломаную, состоящую из двух отрезков:

Теперь перейдем к полигонам.

Полигоны

Полигон — замкнутый набор отрезков. Попробуем нарисовать и залить цветом прямоугольный треугольник (с помощью команды fill() ):

Окружности

Окружности рисуются с помощью команды arc(ox, oy, radius, startAngle, endAngle, antiClockWise) , где ox и oy — координаты центра, radius — радиус окружности, startAngle и endAngle — начальный и конечный углы (в радианах) для отрисовки окружности, а antiClockWise — направление движения при отрисовке ( true для против часовой стрелке, false — против). Нетрудно сделать вывод, что с помощью arc() можно рисовать как круги и окружности, так и дуги и части окружности.

Давайте сделаем сначала окружность радиуса 100 пикселов:

А потом круг радиусом 120 пикселов:

Очистка canvas

Очистить весь холст или его часть можно с помощью команды clearRect(x, y, width, height) , указав нужные размеры и положение очищаемой области:

На этом на сегодня все. Если есть вопросы — пишите в комментариях к статье. Так же мне было бы интересно узнать, где вы уже применяли или собираетесь применить canvas в своих проектах? Есть ссылки — в комментарии!

Автор: Павел Марковнин

Сооснователь Временно.нет. Интересуется онлайн бизнесом, дизайном, юзабилити и клиентским программированием. Участвует в разработке нескольких интернет-проектов.

Иногда пишет в Твиттер, но чаще на Временно.нет.

10 примеров анимации HTML5 canvas

Canvas (англ. canvas — «холст») — это HTML5-элемент, который предназначен для создания растровых 2D-изображений с помощью скриптов JavaScript. В основном, используется при рисовании графиков и некоторых браузерных игр, а также может применяться для встраивания видео на страницу и для аппаратного ускорения трехмерной графики в WebGL.

Что можно сделать в ? Чтобы долго не рассказывать, предлагаем вам взглянуть самим — для этого мы собрали 10 примеров анимации HTML5 canvas, которые отлично демонстрируют возможности данного элемента в паре с JavaScript. Выглядит весьма вдохновляюще! Для перехода на сайт с анимацией кликните по картинке.

1. Meru.ca — жидкий логотип

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

2. Растущее дерево

Дерево, которое каждый раз вырастает разным.

3. Восьмибитная анимация

Умиротворяющая анимация водопада.

4. Анимированные буквы

Здесь можно вписать свое сообщение.

5. «Жидкие» частицы

Частички, реагирующие на перемещения курсора и клики.

6. CoolClock

Настраиваемые аналоговые часы.

7. Starfield

Бесконечный звездный полёт.

8. Симуляция ткани

Можете подергать за «ткань».

9. Туманность

Пыль, газ и плазма.

10. Pearl Boy

Pearl Boy был создан для демонстрации возможностей Goo Engine, HTML5/WebGL и JavaScript. Работает на любом устройстве с поддержкой WebGL и не нуждается ни в каких плагинах.

Учим HTML5 Canvas за 30 минут

Сегодня будет легкий, но классный урок. Мы познакомимся с HTML 5 Canvas.

С помощью Canvas Вы сможете создавать интересные эффекты на странице, разрабатывать игры и полезные графические инструменты. При этом всем работа с HTML 5 Canvas осуществляется посредством языка программирования JavaScript, но там все очень просто. Его поддержка радует во всех смыслах, так как Canvas поддерживается практически везде, даже на старых версиях Internet Explorer.

Соответственно мы разберем работу с самим тегом Canvas, поговорим о его особенностях и нарисуем простейшие графические примитивы, такие как квадрат, круг, треугольник. Затем с полученными знаниями разработаем простенькую программу, позволяющую рисовать, а затем на автомате воспроизводить рисунок. Такая штука раньше была очень популярна на Facebook.

Поехали!

Для начала создадим обычную структуру HTML документа и разместим тег Canvas. Напишем между тегами текст, который будет отображаться, если браузер не поддерживает Canvas. Также имеет смысл дать идентификатор >

Теперь есть смысл начинать писать наш код.

Первое, что нужно сделать в скрипте это подгрузить сам Canvas.

Далее создадим переменную, которая вообще-то называется context, но стандартно пишут ctx. Она будет хранить в себе контекст этого загруженного canvas-a. Загружается он легко, просто обращаетесь к этой переменной canv и вызываете метод getContext. Первым аргументом указываете, какой хотите контекст. Их стандартно 4, но чаще всего используется двумерный контекст, то есть 2d.

Пропишем высоту и ширину Canvas так, чтобы он отображался на всю страницу. По умолчанию его параметры 300x150px. Чтобы не появлялись полосы прокрутки необходимо прописать тегу Canvas значение display: block.

Приступим к рисованию прямоугольника!

Первое, что мы сделаем — нарисуем прямоугольник. Для этого нужно обратиться к нашему контекту, то есть к переменной ctx и указать свойство fillStyle, хотя можно этого не делать и тогда цвет у прямоугольника будет черный.

Далее вызываем метод fillRect, который отвечает за то, чтобы нарисовать непосредственно сам квадрат. Он принимает 4 аргумента: позиции по оси X и Y, на который будет начинаться наш будущий прямоугольник.

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

При этом мы можем его очень просто анимировать. Для этого создаем простую переменную, например, x, которая будет хранить расположение прямоугольника по оси X.

Теперь создаем простейший таймер, который каждых 10 миллисекунд будет перерисовывать этот прямоугольник и увеличивать его позицию по оси X. В начале каждого цикла (таймера, повторения) закрашиваем весь холст белым цветом.

Получаем вот такой код и анимацию

Вообще-то делать анимацию в Canvas через setInterval нет особого смысла, это делается через requestAnimationFrame.

Как нарисовать прямоугольник, но не заполнять его? Чтобы у него были только border-ы. Для этого есть метод strokeRect, который принимает точно те же аргументы, что и fillRect

На выходе Вы получается вот это:

Можно обратить внимание, что цвет border-a прямоугольника не magenta. Так происходит, потому что он вызывается не через fill, а через stroke.

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

Учимся делать круг!

Круг на Canvas делается также очень просто. Для этого есть метод arc. Он принимает 6 параметров: 1 — позиция по оси x, 2 — позиция по оси y, 3 — радиус круга, 4 — начало угла (start angle), 5 — конец угла (end angle), 6 – рисовать круг по часовой стрелке или против. Последний параметр не обязательный. Start angle начинается справа, так как он задается в медианах и когда Вы указываете end angle, то указываете как далеко он пойдет.

Best jQuery HTML5 canvas Plugins & Tutorials with Demo

Pagemap : Mini map for web pages

Pagemap is a sort of navigation system which uses mini map for single page website or any other lengthy web page with javascript and html5 canvas.

Zdog : A Pseudo-3D Engine for Canvas and SVG

Zdog is a 3D JavaScript engine for and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes.

Zdog uses the same principle. It renders all shapes using the 2D drawing APIs in either or . Spheres are actually dots. Toruses are actually circles. Capsules are actually thick lines. It’s a simple, but effective trick. The underlying 3D math comes from Rotating 3D Shapes by Peter Collingridge.

Ambient Canvas Backgrounds with HTML5 Canvas API

Today we’ll be exploring some ambient webpage background animations. The idea here was to create a collection of animations that are interesting to look at without being (too) distractive, and could be easily applied to the background of a webpage. Each animation is created using vanilla (es6+) JavaScript with the Canvas API.

SpriteJS : A lightweight 2D Render Object Model

SpriteJS is a lightweight 2D canvas rendering engine for modern browsers. Manipulate the sprites in canvas as you do with the DOM elements.

SpriteJS can be used with D3.js, Proton and Matter-js.

Features:

  • Manipulate the sprites element as you do with the DOM elements.
  • Perform fast drawing with smart cache.
  • Multiple layers.
  • Web Animations Api
  • Controllable event dispatching.
  • Object Oriented Programmed Development with ES6+
  • Server-s >Read MoreDemo

Topbar : Tiny & beautiful site-w > September 21, 2020 | Plugins

Topbar is site-wide progress indicator with following features:

  • Tiny (1KB minified and gzipped), no dependency
  • Perfect for single-page/Turbolinks/pjax applications
  • Responsive

topbar works with any browser that supports HTML5 Canvas.

Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

Integrated-2D – is an Open source Javascript framework for rendering 2D graphics on SVG, Canvas and WebGL contexts. I2D’s simple syntax and semantics lets you combine the power of Vector graphics and Bitmap to achieve complex visualisations easily.

I2Djs provides single Application Programming Interface to create and animate elements across different graphic rendering contexts by leveraging their underlying capabilities. Developers can make use of I2D’s multi-layered contextual approach with capabilities from more than one context seamlessly for creating powerful composite visualisation under a single roof.

I2D also provides a unique data-driven approach with join-actions for DOM manipulation based on data binding.

Hilo : HTML5 Game Framework

Hilo is a Cross-end HTML5 Game development solution developed by Alibaba Group. It could help developers build HTML5 games conveniently in minutes.

Features:

  • independency modules design, support multiple module styles;
  • Object Oriented Programmed Development;
  • Simple and efficient Visual Object Architecture;
  • Multiple render model supported, including CanvasRenderer , DOMRenderer and WebGLRenderer ;
  • Compatible for multiple desktop and mobile browsers. Using Flash Shim to support IE (yes as you can see, it support IE);
  • Physics extensions supported: Chipmunk
  • Skeleton animation extensions supported: DragonBones

Physics-Based Background Scroll Effects with JavaScript

This article will show you how to create nifty physics-based background scroll effects for your web pages. We’ll be using Matter.js, an excellent open-source JavaScript framework, to handle the physics for us.

BLOB – Interactive Animated 3D Background

BLOB is animated, interactive and highly customizable 3D background. Visual editor included. Supports morphing and other shape transitions. Created as Javascript plugin based on HTML5 Canvas.

Features:

  • Interactive 3D background
  • HTML5 Canvas technology
  • Does not require WebGL support
  • All browsers and platforms
  • Works both online and offline
  • Multiple instance support
  • Three animation concepts that can be combined
  • Responds to mouse movements
  • Easy to use
  • Highly customizable
  • Rich API
  • Visual editor

Canvallax.js : Easy Parallax Effects on Canvas

Canvallax is a small (5.8kb minified, 2.1kb gzipped) dependency-free Javascript library for managing elements on . Support is built-in for:

Introduction to jCanvas: jQuery Meets HTML5 Canvas

HTML5 lets you draw graphics straight into your web page using the element and its related JavaScript API.

In this post, I’m going to introduce you to jCanvas, a free and open source jQuery-based library for the HTML5 Canvas API.

If you develop with jQuery, jCanvas makes it easier and quicker to code cool canvas drawings and interactive applications using jQuery syntax.

What is jCanvas?

The jCanvas website explains:

jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more.

The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 canvas.

jCanvas enables you to do everything you can do with the native Canvas API and more. If you prefer, you can also use native HTML5 Canvas API methods with jCanvas. The draw() method serves just this purpose. Furthermore, you can easily extend jCanvas with your own methods and properties using its extend() feature.

Adding jCanvas to Your Project

To include jCanvas in your project, download the script from the official website or the GitHub page, then include it in your project folder. As mentioned, jCanvas needs jQuery to work, so be sure to include that too.

Your project’s script files will look something like this:

The last one would be where you put your custom JavaScript using the jCanvas API. Now let’s take jCanvas for a test drive.

Setting up the HTML Document

To follow along with the examples, start by adding a element tag to a basic HTML5 document.

Here are a few points of interest about the code snippet above.

  • By default, the dimensions of the drawing surface are 300px by 150px. You can modify this default size in the width and height attributes inside the element’s markup.
  • Adding an id attribute is not required but will be an easy way to access the element with JavaScript.
  • Content inside the element is just a bitmap image. This makes it inaccessible to users of assistive technologies. Also, browsers that don’t have support for the Canvas API will not be able to access its content or interact with it in any way. Therefore, while techniques aiming to make more accessible are yet to be made available, adding some fallback content for this category of users is the recommended practice.

If you were to use the native Canvas API, your JavaScript would look something like this:

The variable context in the code above stores a reference to the 2D context property of the Canvas object. It’s this property that enables you to access all other properties and methods exposed by the HTML5 Canvas API.

If you’d like to learn more about the topic, HTML5 Canvas Tutorial: An Introduction by Ivaylo Gerchev is a great read.

jCanvas methods and properties already contain a reference to the 2D context, therefore you can jump straight into drawing.

Drawing Shapes with jCanvas

Most jCanvas methods accept a map of property-value pairs that you can list in any order you like.

Let’s start by drawing a rectangle shape.

The Rectangle Shape

This is how you draw a rectangle shape using the drawRect() method of the jCanvas object.

The snippet above caches the canvas object into a variable called $myCanvas . The properties inside the drawRect() method are mostly self-explanatory, but here’s a brief rundown:

  • fillStyle sets the rectangle’s background color;
  • strokeStyle sets its border color;
  • strokeWidth sets the shape’s border width;
  • x and y set the coordinates corresponding to the rectangle’s horizontal and vertical position inside the canvas. A value of for x and of for y, i.e., (0, 0), corresponds to the top left corner of the canvas. The x coordinates increase to the right and the y coordinates increase towards the bottom of the canvas. When drawing the rectangle, by default, jCanvas takes the x and y coordinates to lie at the center of the shape.
  • To change this so that x and y correspond to the rectangle’s top left corner, set the fromCenter property to false .
  • Finally, the width and height properties set the dimensions of the rectangle.

Here is a demo with the rectangle shape:

Arcs and Circles

Arcs are portions of the rim of a circle. With jCanvas, drawing arcs is just a matter of setting the desired values for a few properties inside the drawArc() method:

Drawing arcs involves setting a value for the radius property as well as the start and end angles in degrees. If you’d like the direction of your arc to be counterclockwise, add the ccw property to the code above and set it to true .

Here’s a CodePen demo of the above code:

Drawing a circle is as easy as omitting both start and end properties from the drawArc() method.

For instance, here’s how you can draw a simple graphic of a smiling face using only arc shapes:

Remember that jCanvas is based on the jQuery library, therefore you can chain jCanvas methods the same way you can chain jQuery methods.

Here’s how the code above renders in the browser:

Drawing Lines and Paths

You can quickly draw lines with jCanvas using the drawLine() method and plotting a series of points to which your lines are going to connect.

The code above sets the rounded and closed properties to true , thereby rounding the corners of the line and closing the traced path.

You can also draw flexible paths using the drawPath() method. Think of a path as one or more connected lines, arcs, curves, or vectors.

The drawPath() method accepts a map of points and a map of x and y coordinates for the sub-paths inside each point. You also need to specify the type of path you’re going to draw, e.g., line, arc, etc.

Here’s how you can draw a pair of connected horizontally and vertically pointing arrows using drawPath() and draw arrows(), the latter of which is a handy jCanvas method that enables you to quickly draw an arrow shape on the canvas:

The x and y coordinates of each sub-path are relative to the x and y coordinates of the entire path.

And here’s the result:

Drawing Text

You can quickly draw text on the canvas with the aptly named drawText() method. The main properties you need for this to work are:

  • text . Set this property to the text content you’d like to display on the canvas: e.g. ‘Hello world’
  • fontSize . The value for this property determines the size of the text on canvas. You can set the value for this property with a number, which jCanvas interprets as a value in pixels: fontSize: 30 . Alternatively, you can use points, but in such a case you need to specify the measurement inside quotes: fontSize: ’30pt’
  • fontFamily allows you to specify a typeface for your text image: ‘Verdana, sans-serif’ .

Here’s the sample code:

And this is what it looks like inside the element on the web page:

Drawing Images

You can import and manipulate images using the drawImage() method. Here’s an example:

And this is how the code above renders:

You can view and fiddle around with all the examples above combined into a single CodePen demo here.

Canvas Layers

If you’ve ever used an image editor application like Photoshop or Gimp, you’re already familiar with layers. The cool part of working with layers is that you gain the ability to manipulate each image on your canvas individually, by drawing it on its own layer.

jCanvas offers a powerful layer API that adds flexibility to your canvas-based designs.

Here’s an overview of how to use jCanvas layers.

Adding Layers

You can only draw one object on each layer. You can add layers to your jCanvas project in either of two ways:

  • Use the addLayer() method followed by the drawLayers() method
  • Set the layer property to true inside any of the drawing methods

Here’s how you apply the first technique to draw a blue rectangle.

See the Pen PZeNGp by SitePoint (@SitePoint) on CodePen.

And here’s how you apply the second method to draw the same rectangle:

See the Pen zrjqKb by SitePoint (@SitePoint) on CodePen.

As you can see, with each of the above, we get the same result.

The important point to notice in both code samples above is that the layer has a name that you set via the name property. This makes it easy to refer to this layer in code and do all sorts of cool things with it, like changing its index value, animating it, removing it, etc.

Let’s see how we can do this.

Animating Layers

You can quickly add animations to your layer-based drawings with jCanvas using the animateLayer() method. This method accepts the following parameters:

  • The layer’s index or name
  • An object with key-value pairs of properties to animate
  • The animation’s duration in milliseconds. This is an optional parameter, if you don’t set it, it defaults to 400
  • The easing of the animation. This is also an optional parameter, if you don’t set it, it defaults to swing
  • An optional callback function that runs when the animation completes.

Let’s see the animateLayer() method in action. We’ll draw a semi-transparent orange circle on a layer, then animate its position, color, and opacity properties:

Check out the demo below to see the animation:

You can view all the three previous examples combined in this CodePen demo.

Draggable Layers

One more cool feature I’d like to draw your attention to is the ability to turn a regular jCanvas layer into a draggable layer by simply setting the draggable property of the layer to true .

The snippet above draws two draggable rectangle layers by incorporating: draggable: true . Also, note the use of the bringToFront property, which ensures that when you drag a layer, it automatically gets pushed to the front of all other existing layers.

Finally, the code rotates the layers and sets a box shadow, just to show how you can quickly add these effects to your jCanvas drawings.

The result looks like this:

If you’d like your app to do something before, during, or after moving a draggable layer, jCanvas makes it easy to accomplish this by supporting callback functions during the relevant events:

  • dragstart triggers when you start dragging the layer
  • drag fires as you drag the layer
  • dragstop triggers when you stop dragging the layer
  • dragcancel occurs when you drag the layer off the border of the drawing surface of the canvas.


Let’s say you’d like to display a message on the page after the user finishes dragging a layer. You can reuse the code snippet above by adding a callback function to the dragstop event, like so:

After dragging each square, you’ll see a message on the page telling you which color square you just dropped. Try it out in the demo below:

Conclusion

In this post I’ve introduced you to jCanvas, a new jQuery-based library that works with the HTML5 Canvas API. I’ve illustrated some of jCanvas methods and properties that quickly enable you to draw on the canvas surface, add visual effects, animations, and draggable layers.

There’s so much more that you can do with jCanvas. You can visit the jCanvas documentation for detailed guidance and examples, which you can quickly test in the sandbox on the jCanvas website.

To accompany this article, I’ve put together a basic painting application on CodePen using the jCanvas drawLine() method:

Feel free to make it better by adding more features and sharing your results with the SitePoint community.

Free jQuery Canvas Plugins

All the Free jQuery Plugins about ‘Canvas’ are listed here.

Attractive Plotting Plugin with jQuery — Flot

Flot is a JavaScript plotting library works with jQuery for creating attractive looks and interactive Charts or Graphs.

Smooth Signature Pad Plugin with jQuery and Html5 Canvas

Signature Pad is a jQuery plugin that takes advantage of HTML5 canvas element and javascript to create a flexible and smooth Signature Pad on your web page & app.

Animated Circle Statistics Plugin With jQuery and Canvas — Circliful

Circliful is a jQuery chart plugin that animates the presentation of your information with good looking circular design, a little similar to the ring chart.

Pixelating Images Using jQuery and Canvas — pixel-flow

pixel-flow is a jQuery image filter plugin that helps you implement pixelating effects on any images using Html5 canvas.

Multifunctional Barcode Generator with jQuery and Html5 Canvas — JsBarcode

Just another barcode generator plugin to creates various types of barcodes using jQuery and Html5 canvas element.

jQuery Plugin To Create Sparkling Stars Animations — Canvas Sparkles

Canvas Sparkles is a jQuery & Html5 canvas based plugin to create a fancy sparkling stars animations on any DOM elements like images.

Pixelating An Image Using jQuery Pixelate Plugin

pixelate.js is a small and funny jQuery plugin that allows you to pixelate an image (or photo) using javascript and HTML5 canvas element.

Create A Drawing & Signature App With jQuery And HTML5 Canvas

Basic Canvas Paint is a jQuery plugin used to generate a touch-enabled drawing/paint/signature web app using HTML5 canvas and a little bit JavaScript.

Animated Circular Progress Bar with jQuery and Canvas — Circle Progress

Circle Progress is a jQuery plugin that makes use of canvas element to draw an animated circular gradient progress bar in your web page/app.

jQuery Plugin For Canvas Image Map Area Editor — Canvas Area Draw

Canvas Area Draw is a jQuery plugin for creating and editing image map area polygons in a canvas-based GUI that replaces form elements.

Animated Feature-rich Chart / Graphic Plugin With jQuery — charts

A robust jQuery/HTML5 chart / graph plugin which helps you draw a wide variety of animated, customizable graphics and charts using HTML5 canvas API.

Canvas Based Image Sequence Player With jQuery — imgplay

A jQuery & Html5 canvas based image player/viewer plugin which allows to view a sequence of images with play/pause/stop/forward/backward/fullscreen controls.

Touch-enabled Signature Plugin with jQuery and Canvas

Signature is a lightweight jQuery plugin that creates an Html5 canvas based signature field for smooth, touch-enabled signature drawing.

Canvas Based Color Picker For Any Web Elements — Pickemall

Pickemall is a jQuery plugin which renders your webpage into a canvas image and then you can get the color in RGB or Hex from any page elements.

jQuery Plugin To Get Color Of Each Pixel Of An Image — Broilerjs

Broilerjs is a jQuery plugin which utilizes Canvas getImageData() method to get the color of each pixel of an image and then you can apply the color to any DOM element(s).

TagCanvas — HTML5 Tag Cloud with Jquery

TagCanvas is a jQuery Plugin bulit with TagCanvas.js for creating a HTML5 canvas based tag cloud.

Simple jQuery Image Zoom, Pan and Crop Plugin — Cropit

Cropit is a jQuery & canvas based image cropping plugin which allows to crop a local image with image zoom and image pan support.

Canvas And jQuery Based Dynamic Background Effects — MagicCanvas

MagicCanvas is a jQuery plugin which utilizes Canvas and requestAnimationFrame to create fancy interactive effects on your background.

jQuery Client S > 11/17/2015 — Other — 20553 Views

SimpleCropper is a jQuery image cropping plugin that allows you to crop a local image and generate a new Base64 encoded image client side, based on Html5 canvas element and CSS3.

Animated Circular Loader Plugin with jQuery and Canvas — CircletPreloader

CircletPreloader is a jQuery plugin that utilizes canvas 2D drawing API to draw an animated, circular progress indicator for representing percentage value in an elegant way.

Minimalist Graphical Progress Indicator with jQuery and Canvas — circleGraphic

circleGraphic is a jQuery plugin that uses HTML5 canvas 2D API to draws an animated, circular progress indicator (gauge meter, dial) to represent percentage values.

Generating Animated Particles with jQuery and Canvas

Canvas Particles is a JQuery plugin that renders animated, interactive, fully configurable particles using HTML5 canvas 2D API.

Basic Line Chart Plugin with jQuery and Canvas — linechart.js

A really simple jQuery plugin to draw a canvas based line chart on your webpage that features html tooltip, multiple data lines, and dots click / hover functions.

Canvas Based Hexagon Progress Bar Plugin with jQuery — Hexagon Progress

Hexagon Progress is a lightweight and customizable jQuery plugin for creating animated hexagon progress bars using Canvas 2D API.

jQuery Based Picture To SVG (Vector) Converter — VectorCam

VectorCam is a jQuery based SVG image converter that allows to vectorize your local pictures into SVG files using Html5 canvas element and imagetracer.js JavaScript library.

jQuery Plugin For Circular Progress Indicators — Circle Progress

Circle Progress is a customizable jQuery plugin for visualizing your numeric data in an animated circular progress bar.

jQuery Plugin To Create Border Radius Inset For Images

Border Radius Inset is a jQuery plugin which takes advantage of canvas 2D and CSS3 magic to create inverted rounded corners (negative border-radius) for images.

jQuery Plugin For HTML5 Canvas Based Scratchcard — ScratchIt

ScratchIt is a jQuery plugin used to create an Html5 canvas based scratchcard which allows you reveal concealed html elements by scratching off the opaque covering.

Creating Raindrops On Water Effects with jQuery and Canvas — raindrops

raindrops is a jQuery plugin that helps you create a ‘raindrops impacting on water surfaces’ effect using jQuery UI and Html5 canvas element.

jQuery Plugin To Export Canvas Using File Download Dialog — ExportCanvas

ExportCanvas is an easy-to-use JavaScript library which allows you to export canvas objects using browser file download dialog.

jQuery Plugin For Crossfading Images As You Scroll Down — Crossfade.js

Crossfade.js is a tiny JQuery script that crossfades (blurs) background images when they are scrolled out of view.

jQuery Plugin To Connect Two Html Elements with A Line

Connecting Line is a small jQuery plugin which draws an Html canvas based line between two draggable Html elements.

jQuery Plugin To Create Starry Background Using Canvas — Starfield

Starfield is a tiny jQuery plugin to create a canvas based, interactive moving starry background that reacts to your mouse cursor.

jQuery Plugin To Create Canvas Based Fireworks

A jQuery plugin that utilizes canvas 2D to create animated fireworks on the webpage or a specific container.

Circular Percentage Loader Plugin with jQuery and Canvas — > 11/20/2014 — Loading — 44248 Views

ClassyLoader is a highly configurable jQuery plugin for creating a circular animated loader with progress percentage display.

HTML5 & JavaScript Column Charts — CanvasJS

CanvasJS is an HTML5 & JavaScript based Charting Library that runs on all modern devices including iPhone, Android, Desktops, etc.

KitKat Clock-Style Timer Picker with jQuery and CSS3 — KitKatClock

KitKatClock is a jQuery, Html5 and CSS3 powered time picker which allows you to pick a time from an Android 4.4 Kit Kat clock interface based on Html5 canvas element.

Create A Mosaic Transition Effect with jQuery and Canvas — Mosaic

Mosaic is a funny jQuery plugin that takes advantage of canvas element to pixelate an image like the mosaic reveal effect.

jQuery Plugin To Create An Animated Canvas Graph — Codex Graph

Codex Graph is a lightweight jQuery plugin used to create an animated knob-like graph from a list of items with Html5 data-pamt attributes.

Simple Radar Chart Plugin with jQuery and Canvas — Radar Plus

Radar Plus is a lightweight jQuery plugin helps you draw a polygonal graph (radar chart) on circles using Html5 canvas element.

Creating Animated Waves Using jQuery and Canvas

Waves is a jQuery plugin that makes use of Html5 canvas to draw animated & customizable waves at a certain animation speed.

Animated Bubbles Background with jQuery and Canvas

With Html5 canvas element and a little jQuery magic, we can create a fantastic animated bubbles background for any container.

jQuery & Canvas Based Polygon Graph Plugin — Polygonal Graph

polygonal Graph is a jQuery & jQuery UI based widget used to render a simple polygon graph (radar chart) in an Html5 canvas element.

Simple Yet Multi-purpose jQuery & Html5 Chart Plugin — czChart

czChart is a simple and cross browser jQuery plugin that allows you to create various types of charts (like bar chart, pie chart, group stack chart, etc) on the web page, based on HTML5 canvas element.

Easy Image Morphing Effect with jQuery and Canvas — morphing.js

morphing.js is a lightweight jQuery plugin to create an Html5 canvas based image morphing effect responding to mouse move.

jQuery Plugin For Creating Rounded Badges Using Canvas — Mambo

Mambo is a jQuery plugin that takes advantage of HTML5 Canvas element and javascript to create rounded badges with labels, display percentages or both.

Create Skill & Experience Graphs with jQuery and Canvas

Skill Graphs is a jQuery plugin that makes use of Html5 canvas element to generate radar chart-style graphs for presenting your skills & experiences.

Simpe Mobile Signature Pad with jQuery and Html5 Canvas

SignaturepadHTML5 is a jQuery, jQuery mobile and Html5 canvas based mobile signature pad that allows to draw signature and save it as a PNG for later download.

Create An Andro > 05/29/2014 — Loading — 6613 Views

A lightweight jQuery plugin that uses Javascript and Html5 canvas to create a circular, animated, Android Holo themed loading spinner for your dynamic content loaded with AJAX.

Minimal Animated jQuery Data Visualization Plugin — Dataviz

Dataviz is a simple lightweight jQuery data visualization plugin that draws a pie chart or bar chart from a dataset defined in Html elements.

jQuery Plugin To Draw Curved Arrows Using Canvas — Curved Arrow

Curved Arrow is a minimal jQuery script that allows you to draw curved arrows using Html5 canvas element. Useful for tutorials, walkthroughs, and wizards.

jQuery Image Processing Plugin With Canvas — Tancolor

Tancolor is a jQuery image processing plugin that makes use of canvas 2D API to convert an image into grayscale, bluescale, greenscale, redscale and more to come.

Create A Simple Drawing App Using jQuery and Html5 Canvas — Simple Draw

Simple Draw is a small sketchpad web app built with jQuery and Html5 canvas to provide online paint/drawing using touch or mouse.

Create Animated Worms Background With jQuery and Html5 — Glassy Worms

Glassy Worms is a fancy jQuery plugin that adds worms crawling effects on your background using Html5 canvas element.

Simple Canvas Line Chart Plugin For jQuery and jQuery UI — Chart2

Chart2 is a very simple chart plugin built on top of jQuery, jQuery UI and Html5 canvas to draw a line chart & graph by loading data from Javascript array objects.

Abstract Smoky Background with jQuery and Canvas — waterpipe.js

waterpipe.js is a cool jQuery plugin that makes use of HTML5 canvas to dynamically generate an abstract smoky background for your web page.

Easy Pie & Bar Chart Plugin with jQuery and Html5 Canvas — visualize

visualize is an easy to use chart jQuery plugin that makes use of javascript and Html5 canvas element to render a simple pie chart or bar chart with random colors on your web page.

Clean Customizable Graph & Chart Plugin with jQuery and Canvas — Graphly

Graphly is a lightweight jQuery plugin to generate an Canvas based graph & chart from your data constructed in a Javascript file.

jQuery Plugin For Basic Image Color Manipulations — Colorimazer

Colorimazer is a jQuery Plugin that allows basic image color manipulations such as grayscale, inverse, polarize, opacity, hue, colorize, etc.

Animated Donut Chart Plugin with jQuery and Canvas — DoughnutIt

DoughnutIt is an awesome jQuery chart plugin that utilizes Chart.js and Html5 canvas element to draw an animated donut/pie chart with some text inside and around it.

Falling Snow Effect with jQuery and HTML5 Canvas — Let It Snow

Let It Snow is a jQuery plugin to add customizable and realistic (or virtual) snow falling animations on your website using jQuery and Html5 canvas element.

Creating An Animated DNA Double Helix with jQuery and Canvas

Double Helix is a small jQuery plugin for creating animated double helix structure of DNA by using HTML5 canvas element.

Clean and Minimal jQuery Chart Plugin — jqCandlestick

jqCandlestick is a jQuery and canvas based plugin that makes it easier to create point chart, plot chart, line chart, column chart, bar chart, and candlestick chart.

jQuery Plugin To Draw Shapes with Html5 Canvas Element — drawingshapes

drawingshapes is a javascript plugin built with jQuery and paper.js that allows you to draw shapes (circle or lines) within an DOM element using Html5 Canvas element.

jQuery Plugin To Pixelate Images Using Html5 Canvas

Pixelate is an image handling plugin for jQuery which allows to pixelate an images with a custom percentage of pixelation, based on HTML5 canvas element.

Creating A Local Time Clock Using jQuery and Canvas — canvasClock

An easy and fast jQuery plugin used to create a graphical clock using Html5 canvas elements.

Creating Snow Falling Effect with jQuery snowfall Plugin

snowfall is a small jQuery plugin for simulating snowflakes falling with a little parallax effect on your web site, by using HTML5 canvas element.

Yet Another Falling Snow Animation with jQuery and Canvas — GlauserChristmas

GlauserChristmas is yet another fancy jQuery plugin for generating a snowflakes falling animation based on Html canvas element.

Canvas Based jQuery Photo Editing Plugin — PhotoJShop

PhotoJShop is a jQuery image editing plugin that makes use of Html canvas element and javascript to apply effects, color filters and custom effect matrix on a photo.

Lightweight jQuery Plugin For Drawing Waves with HTML5 — Wave

Wave is a lightweight (

2kb minified) jQuery plugin for drawing waves (Soundwave, ECG, Seismogram, etc) on your web page using HTML5 canvas 2D.

Strike-Through Like Text Squiggle Effect Plugin with jQuery — Squiggle

Squiggle is a funny jQuery plugin that scribbles out your content with a squiggle by using HTML5 Canvas element, like a strike-through or underline over your text.

Realistic Raindrops Effect with Canvas and Rainyday.js

rainyday.js is an awesome javascript library for creating a realistic raindrops effect on your webpage using Html5 Canvas element and javascript.

jQuery Plugin For Random Dav > 08/18/2013 — Other — 333 Views

Carson.js is a jQuery plugin which takes advantage of javascript and canvas element to make random David Carson inspired art.

Simple jQuery Photo Gallery Plugin with Auto Image Resizing — Relocator.js

Relocator.js is a lightweight and smart jQuery plugin for creating a photo gallery that auto resizes the images and fit within the given canvas without stretched or shrinked.

jQuery Plugin To Determine The Fractions For An HTML Element — Fracs

Fracs is a fancy and stunning jQuery plugin that determines the visible fractions of an HTML element and also provides the coordinates of these areas.

jQuery Plugin For HTML5 Canvas Overlay Effects — Canvas Overlay

jQuery Canvas Overlay is a jQuery plugin that allows HTML5 canvas overlays with cutout at the current cursor position.

jQuery Plugin For Image RGB PRINTS Effect — offreg

offreg is a jQuery plugin that uses canvas to create a RGB ‘screen print’ offset effect on an image.

Awesome Interactive Particles Sl > 07/03/2013 — Slideshow — 3966 Views

An awesome interactive slideshow component with math shapes and texts using html5 Canvas and CSS3.

jQuery Plugin For Generating Random Texture or Height Map — Graphics Demo

Graphics Demo is an awesome jQuery plugin for generating a random texture or height map on a canvas.

jQuery Plugin for Client S > 05/15/2013 — Layout — 37774 Views

canvasResize is a plugin works both with jQuery and Zepto that allows to auto resize/rotate client side images using HTML5 canvas tag.

Dynamic Tip-Like Text Box Plugin With jQuery and HTML5 — jsnoticebox

jsnoticebox is a simple jQuery plugin that allows you to create a draggable and resizable text notice box on your web page.

jQuery Plugin For H > 04/15/2013 — Other — 1443 Views

Spoiler Alert is a funny jQuery plugin that allows you to hide any html element of your web page with a bit of SVG blur. Hint on mouseover. Reveal on click.

Easy and Object Oriented Javscript Chart Library — Chart.js

Chart.js is a flexible and easy-to-use javascript chart library which takes advantage of HTML5 canvas tag to quickly create animated and nice look charts for your projects.

jQuery Treemap Plugin for Hierarchical Data — jsTreemap

jsTreemap is a javascript treemap widget built with jQuery, jQuery UI and HTML5 Canvas tag that presents hierarchical data using the squarified treemap layout algorithm.

HTML5 Canvas Emulator For Old Internet Explorer

For support for Internet Explorer 6/7/8, you can use this Canvas Emulator that just includes the explorer canvas script on your page.

JS Interactive Visualizations Charts Library with HTML5 — dygraphs

dygraphs is a javascript library for creating responsive, interactive and customizable charts with HTML5 canvas tag for your projects.

Extensible Html5 Drawing W > 12/24/2012 — Other — 3407 Views

oriDomi is a lightweight (less than 15k) Javascript Library for Folding up DOM elements like paper.

Canvas Based Drawing Plugin with jQuery — Sketch

Sketch is a simple jQuery Drawing Plugin that make it easy to create canvases upon which visitors can draw.

Canvas и jQuery?

Можно ли использовать jQuery с элементом HTML5 ? Или мне нужно сделать это с помощью обычного JavaScript?

Мне просто интересно, потому что я думаю, что я мог бы сэкономить много времени с помощью jQuery, но я не знаю, как использовать элемент , так что это может быть совершенно невозможно!

Кто-нибудь знает, могу ли я использовать jQuery для этого?

Вы можете использовать jQuery для select элемента canvas, но вам придется использовать его собственные методы. Постойное начало было бы https://developer.mozilla.org/en/canvas_tutorial.

jQuery — это инструментарий для взаимодействия и управления DOM плюс некоторые дополнительные опрятные методы ajax. Raphael и/или Protovis являются инструментами для визуализация.

Processing.js — это инструментарий визуализации специально для элемента canvas.

jQuery имеет один опыт, другие инструментальные средства имеют другой опыт, хотя очень возможно использовать инструменты специализации вместе;)

HTML5 Canvas: что это такое?

На первый взгляд, элемент — это элемент HTML5 , который можно использовать для рисования. Он представляет собой лишь контейнер, в котором можно рисовать что-либо с помощью других методов. HTML canvas используется для отображения графиков, диаграмм, анимации и чтобы обойти проблемы с поддержкой CSS в некоторых браузерах.

Что можно рисовать с помощью : арки, кривые ( их различные типы ), линии и прямоугольники. Конечно же, их можно комбинировать, и за счет этого создавать практически любые формы или объекты с различными эффектами ( прозрачность, смешивание, градиенты, тени, заливки и контуры ).

Примеры использования HTML5 Canvas

Создадим простую фигуру при помощи элемента . Код будет достаточно простым:

В данном примере мы сначала выводим надпись, а после нее размещаем фигуру при помощи элемента canvas : ширина и высота получились по 400, а ширина границы 10 пикселей. В результате мы получаем большой квадрат с толстым контуром.

Суть HTML 5 canvas кроется в возможности рисовать при помощи JavaScript . С помощью приведенного ниже кода мы создаем холст размером 500 на 500 пикселей с желтой границей толщиной 10 пикселей. Затем при помощи JavaScript в центре холста « рисуем » черный квадрат:

В приведенном выше HTML canvas примере fillStyle сообщает браузеру, каким цветом нужно залить наш рисунок. Тем временем fillRect определяет местоположение и размер рисунка в рамках нашего холста, которому мы дали имя « squareCanvas «.

У вас есть четыре координаты, которые нужно заполнить. Первое число ( 125 ) сообщает браузеру, с какого количества пикселей должно начаться изображение. Если заменить цифру на 0, то изображение отобразится сначала холста. Второе число ( также 125 ) сообщает браузеру, каким будет отступ от верхней границы.

Но вы можете рассматривать эти координаты следующим образом. Четыре координаты указывают на начало каждой из четырех точек. Все, что между этими четырьмя точками, будет закрашиваться в соответствии с настройками fillStyle .

HTML5 Canvas: рисуем прямую линию

Линии рисовать еще проще. В данном примере мы снова нарисуем квадрат. После чего добавим скрипт, который нарисует прямую линию через центр холста сверху вниз:

В приведенном выше примере HTML canvas moveTo(100,0) указывает начальную точку для линии. LineTo(100,200) – это параметр, в котором мы указываем конечную точку линии. Метод stroke() позволяет указать тип заливки линии. В данном случае мы оставляем этот параметр пустым, что дает нам простую черную линию.

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

HTML5 Canvas: работа с текстом

Кроме фигур элемент HTML canvas также позволяет создавать тексты. Рассмотрим пример с использованием шрифта Arial в размере 32px :

В этом случае text.font позволяет указать размер и шрифт текста. У fillText имеется несколько параметров: первый – это текст, который вы хотите « нарисовать », а второй и третий отвечают за оси X и Y . Цифра 50 в приведенном выше коде определяет начальную точку вывода текста с левой стороны холста, цифра 100 отвечает за отступ от верхней границы холста.

Иные способы применения

Элемент HTML5 canvas также можно использовать для вставки изображений, градиентов и комплексной анимации.

Данная публикация представляет собой перевод статьи « HTML5 Canvas: What Is It? » , подготовленной дружной командой проекта Интернет-технологии.ру

Элемент HTML5 canvas. Подробное руководство

Canvas — («canvas» — холст) — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи javascript.

Canvas всегда выводит растровую графику. Если вы хотите вывести векторную графику посредством canvas, то исходное изображение потребуется перерисовать в новом масштабе, использую векторные команды.

Вставляем элемент canvas на страницу

  • Если не указать ширину и высоту, то холст получит значения по умолчанию ( 300px X 150px ). Можно использовать и CSS, например, 60% , но так делать не рекомендуется.
  • Начало координат по умолчанию находится в ЛЕВОМ ВЕХНЕМ УГЛУ. Например, (25;35) означает: 25px от левого края, 35px – верхнего.

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

С помощью canvas можно нарисовать лишь одну фигуру – прямоугольник, все остальные фигуры рисуются с помощью путей.

jQuery

Пути в canvas

Путь может создать закрашенную фигуру, контурную. Функции отрисовки путей:

Функция Описание
beginPath() объявляется начало рисования фигуры (пути)
moveTo() текущее положение фигуры (пути)
координаты для начала пути
lineTo() проводится линия от текущей позиции
arc() используется для окружности (дуги)
arcTo() проводится дуга от текущей позиции
closePath() завершаем рисование фигуры (пути)
stroke() создаем контурную фигуру
quadraticCurveTo() проводится квадрат-я фигуры от текущей позиции

Позиция, в которой заканчивается такие команды, например, как lineTo , является начальной позицией для аналогичных команд, заканчивающихся также на To .

jQuery

Окружность (дуга) в canvas

Для создания дуг (оркужностей) существует метод arc() .

Аргументы метода arc() :

  • x – координаты центра окружности по оси x
  • y – координаты центра окружности по оси y
  • radius — радиус окружности
  • startAngle – начальная точка дуги; углы определяются в радианах 1π , (примерно 3.14 ) радиан равен 180 °
  • endAngle – конечная точка дуги
  • anticlockwide – направление дуги, если true , то против часовой стрелки, если false – по часовой

jQuery

закругленный прямоугольник на canvas — решение

Метод arcTo

Кривая идет из текущей позиции в точку (x1,y1) , а вторая из (x1,y1) в точку (x2,y2) . Удобно создавать закругленные углы.

jQuery

Закругленный угол с радиусом 20px:

jQuery

Обводка, цвет, фон

jQuery

Линейные и радиальные градиенты canvas

Линейный градиент в canvas

Последовательность создания градиентов:

  1. Присваиваем градиенту имя и создаем градиент
  2. Описываем градиент (создаем цветовые переходы)
  3. Применение градиента
  4. Создается фигура

jQuery

Радиальный градиент в canvas

Для создания радиального градиента используется команда createLinearGradient. В параметрах указываем положение и радиус кругов.

Центры окружностей обычно располагают в одном месте. Пространство внутри меньшего руга заполняется первым цветом, например, addColorStop(0, ‘blue’) , цвет постепенно угасает, доходя до границы большего круга. Происходит переход в цвет указанный, например, addColorStop(1, ‘black’) , для второго круга. Вся оставшаяся область (вне второго круга) заполняется конечным цветом, addColorStop(1, ‘black) .

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