HTML5 и Canvas на JavaScript от простого к сложному


Содержание

С чего начать работу с элементом canvas

Создание элемента Canvas

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

После того, как мы задали разметку пустого HTML-документа , пришло время для главного события, которое вы, наверное, с нетерпением ждете последние 30 секунд: продемонстрируем использования в JavaScript canvas на примере.

Добавление элемента Canvas

Элемент canvas определяется HTML-тегом с соответствующим названием — canvas , и он ведет себя, как любой другой элемент HTML . Добавить его можно с помощью следующего парного тега:

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

Визуализация холста

Чтобы визуализировать наш элемент canvas , давайте укажем некоторые стили CSS , чтобы добавить ему рамку. Добавьте внутри раздела head блок CSS , как показано ниже:

Продолжим нашу работу с canvas в JavaScript . После того, как вы добавили этот код CSS , просмотрите страницу. Если все работает как надо, страница будет выглядеть следующим образом:

Как и следовало ожидать, CSS-код добавил к холсту темно-серую рамку шириной в 10 пикселей. Мы имеем доказательства того, что элемент canvas действительно « жив ». Теперь, когда мы можем видеть наш canvas , не кажется ли вам, что он слишком мал? Давайте исправим это!

Изменение размеров элемента Canvas

По умолчанию элементы canvas имеют 300 пикселей в ширину и 150 пикселей в высоту. Но мы хотим чего-то большего. Например, 550 на 350 пикселей. Наверное, вы подумаете, что нужно добавить свойства ширины и высоты в код CSS . Как выясняется, вы не можете сделать это и получить желаемый результат.

Чтобы изменить размеры холста, добавьте атрибуты width и height непосредственно в HTML-код элемента canvas :

Вы можете использовать CSS для установки размера, но при одном условии: нужно сохранить пропорции элемента canvas . Иначе установка размеров через HTML является единственным способом получить нужный размер, чтобы все пиксели на холсте не выглядели странно и растянуто.

Как вы поймете позже, в работе с элементом canvas JavaScript есть некоторые причуды, к которым мы должны относиться терпеливо.

Добавление идентификатора для элемента canvas

Зададим для элемента canvas значение идентификатора, чтобы можно было ссылаться на него в JavaScript . В тег элемента добавьте атрибут id и задайте для него значение myCanvas :

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

На текущий момент я не советовал бы просматривать в браузере то, что у нас получилось: вы опять увидите пустой экран. Однако сейчас мы это изменим!

Создание контента

В предыдущем разделе мы определили в разметке элемент для рисования на canvas в JavaScript . Но это всего лишь незначительная часть работы с холстом. В этом разделе мы напишем код JavaScript , который будет взаимодействовать с элементом canvas , чтобы получить пиксели для вывода на экран.

Добавление тегов script

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

Теперь мы можем написать код, который будет взаимодействовать с canvas JavaScript .

Доступ к элементу canvas

При работе с холстом почти каждый раз первая строка JavaScript будет включать в себя код для получения ссылки на элемент canvas в HTML . Чтобы получить ссылку, в теге script добавьте следующую строку:

Все, что мы делаем здесь, это инициализируем переменную canvas с привязкой к нашему элементу myCanvas , который мы определили ранее в HTML . Мы получаем ссылку на myCanvas с помощью функции querySelector . Она является более эффективным способом поиска элементов в HTML по сравнению со старыми функциями getElementById и getElementsByClass , с которыми вы, возможно, уже знакомы.

Получение контекста рендеринга

Еще несколько полезных мелочей. Для работы с canvas в JavaScript реализовано два режима. Один предназначен для рисования в 2D . О нем мы сейчас будем говорить. Другой режим связан с поддержкой рисования в 3D . Эти режимы более « формально » называются контекстами рендеринга.

Чтобы рисовать в элементе canvas , сначала нужно указать контекст рендеринга, который мы хотим использовать. Это делается через вызов метода getContext для объекта canvas и передачу в него в качестве аргумента контекста рендеринга 2D , который нам нужен:

Переменная context теперь содержит ссылку на контекст рендеринга элемента canvas 2d ,. Если говорить проще, подключив контекст рендеринга, мы получили канал, через который можно вызывать команды для получения пикселей, которые будут выводиться внутри холста! То есть для рисования.

Вызов команд

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

Добавьте следующие строки кода:

После того, как сделаете это, просмотрите HTML-страницу в браузере. Если все прошло успешно, на этот раз вы увидите кое-что реальное: толстую диагональную линию синего цвета:

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

Также у нас есть код, который, задает для canvas JavaScript толщину и цвет выводимой линии:

Заключение

В этой статье мы создали базовый шаблон, который в дальнейшем будет использовать весь связанный с холстом контент. У нас в HTML-документе теперь есть элемент canvas с дополнительными встроенными стилями CSS и атрибутами HTML . После этого мы написали JavaScript , в котором сослались на элемент canvas, получили доступ к контексту рендеринга, а затем вызвали команды, необходимые для вывода пикселей.

Данная публикация представляет собой перевод статьи « Getting Started with the Canvas » , подготовленной дружной командой проекта Интернет-технологии.ру

Canvas, основы работы с помощью JavaScript

Добрый день, уважаемые читатели.

Сегодня я бы хотел с вами поделиться знаниями о таком интересном html5 элементе, как canvas. Этот новый элемент позволяет творить невероятные чудеса в окне браузера.

Что такое canvas и зачем он нужен?

Canvаs (холст) — элемент HTML5 для создания растрового двухмерного изображения. Обычно используется совместно с javascript.

Ширину и высоту canvas можно изменять.

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

Canvas так же используется в WebGL для аппаратного ускорения 3D графики. В результате можно создавать даже 3D игры, работающие в окне браузера.

Создание нашего canvas

Создается canvas путем обычной вставки тега в html-код. Далее через обычный javascript мы получаем элемент и содержимое canvas (строка 10, 11) и рисуем обведенный прямоугольник, который растягивается на всю ширину и высоту canvas.

Примитивы в canvas

В canvas можно рисовать такие геометрические элементы, как:

  1. Прямоугольники
  2. Линии
  3. Окружности, дуги
  4. Различные кривые, эллипс

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

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

Есть еще 2 варианта для рисования прямоугольников:

Ниже приведен пример использования этих 2-х способов:

В результате мы нарисовали большой черный прямоугольник и вырезали область из точки (50, 50) размером 300 пикселей по ширине и 200 пикселей по высоте. Ниже представлено, как это будет выглядеть.

Более интересный пример:

Ниже пример, как это выглядит:

Линии, окружности, дуги

Рисование фигур из линий происходит немного сложней. Здесь используется 4 метода:

Так же нам понадобятся следующие методы для рисования линий:

Ниже приведен пример использования данных методов:

Вот такая замечательная звезда у нас получилась:

Кривая Безье

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

Цукерберг рекомендует:  Web - Справочник HTML+CSS

Все, вроде, хорошо, но вот постоянно рисовать черным цветом не очень интересно. Разнообразим!

Цвет линий и заливки в canvas

Для задания цвета есть 2 свойства: fillStyle и strokeStyle. Задать цвет можно несколькими вариантами:

Попробуем что-нибудь раскрасить, используя разные способы задания цвета:

На этом пока все.

Спасибо за внимание! Жду вас в следующей статье!

Подписываемся на рассылку ��

Автор статьи: Alex. Категория: JavaScript
Дата публикации: 19.02.2014

HTML5 и Canvas на JavaScript: от простого к сложному

С помощью свойств fillStyle и strokeStyle можно легко задать цвета, используемые для изображения заполненных фигур и штрихов. Значения цветов, которые можно использовать, такие же как и в CSS: шестнадцатеричные коды, rgb(), rgba() и даже hsla(), если браузер поддерживает это (например, это свойство поддерживается в Opera 10.00 и более поздних версиях).

С помощью fillRect можно рисовать заполненные прямоугольники. С помощью strokeRect можно рисовать прямоугольники, используя только границы, без заполнения. Если вы хотите очистить некоторую часть холста, можно использовать clearRect. Эти три метода используют одинаковые аргументы: x, y, width, height. Два первых аргумента сообщают координаты (x,y), а два последних аргумента задают ширину и высоту прямоугольника.

Чтобы изменить толщину линий, можно использовать свойство lineWidth. Давайте посмотрим на пример, который использует fillRect, strokeRect, clearRect и другие возможности:

Пример использования fillRect, strokeRect и clearRect

Пути холста позволяют рисовать произвольные фигуры. Вы чертите сначала «контур», затем выбираете для рисования штрих и в конце заполняете при желании фигуру. Создание специальной фигуры выполняется легко – чтобы начать рисовать путь, используйте beginPath(), затем начертите путь, который формирует фигуру с помощью прямых линий, кривых и других примитивов. Когда закончите, вызовите fill и stroke, если хотите заполнить фигуру или нарисовать штрихи, затем вызовите closePath(), чтобы закончить рисование фигуры.

Следующий пример показывает рисование треугольника:

Простой треугольник

Вставка изображений

Метод drawImage позволяет вставлять другие изображения (элементы img и canvas ) в контекст холста. В браузере Opera можно также рисовать изображения SVG внутри холста. Это достаточно сложный метод, который получает три, пять или девять аргументов:

  • Три аргумента: Базовый вариант drawImage использует один аргумент для указания на включаемое изображение, и два для определения координат места назначения внутри контекста холста.
  • Пять аргументов: Второй вариант использования drawImage включает приведенные выше три аргумента, плюс два для определения ширины и высоты вставляемого изображения (если вы захотите изменить его размер).
  • Девять аргументов: Самый развитый вариант использования drawImage включает кроме пяти аргументов два значения для координат внутри исходного изображения, и два значения для ширины и высоты внутри исходного изображения. Эти значения позволяют динамически обрезать исходное изображение перед вставкой в контекст холста.

Следующий пример кода показывает все три типа drawImage в действии:

Пример использования drawImage

Манипуляции с пикселями

API контекста 2D предоставляет три метода, которые помогают рисовать с точностью до пикселя:

  • createImageData,
  • getImageData,
  • и putImageData.

Пиксели хранятся в объектах типа ImageData. Каждый объект имеет три свойства: width, height и data. Свойство data имеет тип CanvasPixelArray, имеющий количество элементов равное width*height*4 ; это означает, что для каждого пикселя определяются значения красного, зеленого, синего цветов и alpha, в том порядке, в котором они должны появиться (все значения находятся в диапазоне от 0 до 255, включая alpha!). Пиксели упорядочиваются слева направо, ряд за рядом, сверху вниз.

С помощью возможностей ImageData можно делать значительно больше, чем только это. Например, можно выполнить фильтрацию изображения, или можно сделать математическую визуализацию (представьте фракталы или что-то еще). Следующий код показывает, как создать простой фильтр для инверсии цвета:

Фильтр инверсии цвета в действии

Текст

На объекте context имеются следующие свойства текста:

  • font: Определяет шрифт текста, таким же образом как свойство CSS font-family )
  • textAlign: Определяет горизонтальное выравнивание текста. Значения: start, end, left, right, center. Значение по умолчанию: start.
  • textBaseline: Определяет вертикальное выравнивание текста. Значения: top, hanging, middle, alphabetic, ideographic, bottom. Значение по умолчанию: alphabetic.

Для отображения текста имеется два метода: fillText и strokeText.

Первый из них изображает форму текста, заполненную с помощью текущего стиля fillStyle, в то время как второй изображает контур/границу текста используя текущий стиль strokeStyle. Оба получают три аргумента: текст для вывода, и координаты (x,y), определяющие место отображения. Существует также необязательный четвертый аргумент – максимальная ширина. Это приводит к тому, что браузер, если понадобится, сжимает текст, чтобы разместить его внутри заданной ширины.

Свойства выравнивания текста влияют на положение текста относительно координат (x,y), заданных в методах отображения.

Теперь пора обратиться к практике – следующий код является примером создания на холсте простого текста «hello world».

Отображение простого текста на холсте

API теней предоставляет четыре свойства:

  • shadowColor: Задает желательный цвет тени. Допустимые значения такие же как и значения цвета в CSS.
  • shadowBlur: Задает величину размытости на тени в пикселях. Чем меньше значение размытости, тем более резкой будет тень. Создает эффект очень похожий на размытость по Гауссу в Photoshop.
  • shadowOffsetX и shadowOffsetY: Определяет смещение тени по x и y в пикселях.

Использование вполне очевидно, как показано в следующем примере кода тени холста:

Пример тени холста – синий прямоугольник с красной тенью

Градиенты

Свойства fillStyle и strokeStyle могут также иметь присвоенные им объекты CanvasGradient вместо строк цвета CSS – это позволяет использовать цветовые градиенты для окрашивания линий и заполнений вместо однородных цветов.

Для создания объектов CanvasGradient можно использовать два метода: createLinearGradient и createRadialGradient. Первый из них создает линейный градиент – линии цвета все идут в одном направлении – в то время как второй создает радиальный градиент – цветовые окружности, расходящиеся из одной точки.

Когда имеется объект градиента можно добавить опорные точки цвета вдоль градиента, используя метод объекта addColorStop.

Следующий код показывает, как использовать градиенты:

Пример с использованием линейного градиента

Сетевые примеры использования холста

Если вы хотите узнать, что другие сделали с помощью холста, то можно посмотреть следующие проекты:

Взаимодействие HTML5 и JavaScript (HTML5 and JavaScript interaction)

В статье описываются особенности создания графических приложений для WEB, связанных с аффинными преобразованиями. В Web приложениях элементы интерфейса описывается в HTML файлах, а логика приложения – в коде javascript (JS).

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

HTML (HyperText Markup Language) – язык разметки гипертекста для описания структуры Web-страницы. Основным компонентом HTML является тег (tag) – код, который командует Web-браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. HTML не является языком программирования, но для организации динамических Web-страниц в него можно включать программы на языке Javascript, в пределах тегов .

Основным инструментом работы и динамических изменений на HTML странице является DOM (Document Object Model) – объектная модель. Согласно DOM-модели, объекты, описываемые в пределах HTML-тегов, структурированы иерархическим способом по мере вложенности один в другой. Ссылку на объекты можно обнаружить в DOM с помощью JavaScript кода.

В HTML5 определен элемент как «растровый холст, который может быть использован для отображения 2D графики. Каждый холст имеет контекст рисования, для которого определены методы и свойства рисования. Объект canvas позволяет также получить WebGL контекст, который обеспечивает 3D графику, используя возможности библиотеки OpenGL.

Структура HTML документа

HTML (HyperText Markup Language) – язык разметки гипертекста, предназначенный для создания Web-страниц [16]. HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. Основным компонентом HTML является тег (tag) – это код, который командует Web-браузеру выполнить определенную задачу типа создания абзаца или вставки изображения. Теги имеют атрибуты, значения которых могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения. Теги представляют собой зарезервированные последовательности символов, начинающиеся с (знаком больше). Закрытие тега отличается от открытия только наличием символа ‘/‘. Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом , и мы хотим применить его к словам «Это мой текст». HTML-последовательность кодов будет выглядеть так:

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

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

HTML- программа должна начинаться тегом и заканчиваться тегом . Суммируя вышесказанное приведем общую структуру HTML-файла :

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java. Для вставки в HTML-программу фрагмента, написанного на языке JavaScript или Viual Basic Script сценариев, используют теги .

JavaScript – это скриптовый язык программирования, код которого, выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу. Javascript – не Java, а совсем другой язык. Он похоже называется, но не более того.

Подключение и выполнение JavaScript

Можно выделить 3 способа подключения скриптов:

  1. подключение в любом месте;
  2. вынос скриптов в заголовок HEAD;
  3. внешние скрипты.

Когда браузер читает HTML-страничку, и видит

Что Вы уже должны знать

Прежде чем приступить к изучению элемента canvas Вы должны иметь базовые знания JavaScript.

Получить соответствующие знания Вы можете в нашем JavaScript учебнике.

HTML5 Canvas

Элемент позволяет рисовать на веб-страницах произвольные фигуры с помощью JavaScript (или других клиентских скриптов).

Цукерберг рекомендует:  Отлавливаем исключения в плагине

При создании элемента canvas необходимо задать атрибут id (определяет имя элемента для доступа к нему из скриптов) и его размеры с помощью атрибутов width (ширина) и height (высота).

Содержимое помещенное между тэгами будет отображено если браузер пользователя не поддерживает элемент canvas.

Обратите внимание: сам по себе canvas ничего не рисует. Он представляет собой холст, который предоставляет возможности для рисования клиентским скриптам.

Рисование прямоугольников

Метод Описание
fillRect(x,y,ширина,высота) Рисует закрашенный прямоугольник.
strokeRect(x,y,ширина,высота) Рисует не закрашенный прямоугольник.
clearRect(x,y,ширина,высота) Очищает указанную зону делая ее полностью прозрачной.

Обратите внимание: параметры x и y задают величину смещения прямоугольника по горизонтали (x) и вертикали (y) от верхнего левого угла холста в пикселях.

Теперь попробуем нарисовать, что-нибудь на холсте.

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

Дата публикации: 2020-02-10

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Canvas, основы работы с помощью JavaScript

Добрый день, уважаемые читатели.

Сегодня я бы хотел с вами поделиться знаниями о таком интересном html5 элементе, как canvas. Этот новый элемент позволяет творить невероятные чудеса в окне браузера.

Что такое canvas и зачем он нужен?

Canvаs (холст) — элемент HTML5 для создания растрового двухмерного изображения. Обычно используется совместно с javascript.

Ширину и высоту canvas можно изменять.

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

Canvas так же используется в WebGL для аппаратного ускорения 3D графики. В результате можно создавать даже 3D игры, работающие в окне браузера.

Создание нашего canvas

Создается canvas путем обычной вставки тега в html-код. Далее через обычный javascript мы получаем элемент и содержимое canvas (строка 10, 11) и рисуем обведенный прямоугольник, который растягивается на всю ширину и высоту canvas.

Примитивы в canvas

В canvas можно рисовать такие геометрические элементы, как:

  1. Прямоугольники
  2. Линии
  3. Окружности, дуги
  4. Различные кривые, эллипс

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

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

Есть еще 2 варианта для рисования прямоугольников:

Ниже приведен пример использования этих 2-х способов:

В результате мы нарисовали большой черный прямоугольник и вырезали область из точки (50, 50) размером 300 пикселей по ширине и 200 пикселей по высоте. Ниже представлено, как это будет выглядеть.

Более интересный пример:

Ниже пример, как это выглядит:

Линии, окружности, дуги

Рисование фигур из линий происходит немного сложней. Здесь используется 4 метода:

Так же нам понадобятся следующие методы для рисования линий:

Ниже приведен пример использования данных методов:

Вот такая замечательная звезда у нас получилась:

Кривая Безье

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

Все, вроде, хорошо, но вот постоянно рисовать черным цветом не очень интересно. Разнообразим!

Цвет линий и заливки в canvas

Для задания цвета есть 2 свойства: fillStyle и strokeStyle. Задать цвет можно несколькими вариантами:

Попробуем что-нибудь раскрасить, используя разные способы задания цвета:

На этом пока все.

Спасибо за внимание! Жду вас в следующей статье!

Подписываемся на рассылку ��

Автор статьи: Alex. Категория: JavaScript
Дата публикации: 19.02.2014

Рисование встроенными средствами HTML5 (Canvas)

Одной из интересных возможностей нового стандарта HTML5 является элемент ‹canvas› , или холст. Холст предназначен для создания (именно, создания) растровых изображений на странице средствами графического движка браузера. Canvas способен изображать не только статические, но и динамические изображения (анимацию).

До появления canvas для вставки анимации могли спользоваться gif-изображения, flash-анимация или, основанные на скриптах или других подключаемых модулях, другие решения (в частности Silverlight, Java Applets, ActiveX и другие). Однако, каждое из этих решений имеет ряд недостатков. Например, плохое качество анимации gif-изображений, большой размер загружаемых модулей Java, несоответствие версий Flash проигрывателя, ActiveX работает исключительно в Internet Explorer и многое другое. Но главным фактором появления анимации и графики на основе canvas является высокий рост мобильного сегмента Интернет, особенно устройств типа iPhone, iPod touch, iPad, а также различных устройств под управлением Android. Установить плагин на них нет возможности, а i-устройства не поддерживают Flash (а начиная с версии 4.0 его также не поддерживают устройства под управлением Android).

Поэтому для поддержки огромной доли рынка мобильных устройств с возможностью подключения к сети Интернет анимацию начали создавать при помощи javascript . Для этого обычно используют библиотеки, как например jQuery или Prototype. C введением в действие стандарта CSS3 часть анимаций возможно создавать с помощью каскадных таблиц стилей. Однако самыми широкими возможностями по созданию изображений и анимаций пользуется стандарт HTML5 и его новый элемент ‹canvas› .

Элемент ‹canvas›

‹canvas› — это новый элемент HTML5, который позволяет создавать изображения на сайте с помощью javascript. Область использования холстов довольно широкая. Чаще всего его можно увидеть при создании деловой графики (чарты, диаграмы, графики), а также для рендеринга браузерных игр (чаще всего встречаются в социальных сетях). У ‹canvas› есть только 2 атрибута – ширина и высота. Если эти атрибуты отсутсвуют, то ширина по умолчанию будет равна 300 пикселей, а высота 150 пикселей.

Элемент ‹canvas› создает контекст отрисовки, на котором в будущем можно создавать и манипулировать объектами javascript. Другими словами, ‹canvas› представляет собой прямоугольную область, в которой с помощью javascript можно «рисовать».

На сегодняшний день стандарт полностью описывает работу двумерных контекстов (для плоской графики, 2D). Однако, сейчас проводится работа по разработке стандарта WebGL, для поддержки элементом ‹canvas› трехмерных контекстов (примеры работ можно посмотреть в Лаборатории Chrome).

Для размещения элемента на странице HTML достаточно указать:

После помещения на страницу элементом ‹canvas› можно манипулировать как угодно: помещать на него текст, рисовать графические элементы и линии, выполнять заливку, добавлять анимацию. Все это делается при помощи команд javascript. Чтобы использовать холст программным путем необходимо прежде всего получить доступ к его контексту. После этого выполняются все необходимые действия с контекстом и только тогда результат подтверждается и выводится на холст. То есть, сначала изображение создается программно, а потом результат выводится визуально.

Так как не все браузеры поддерживают HTML5, то на данное время воспользоваться ‹canvas› можно только в следующих браузерах (по информации caniuse.com):

  • Internet Explorer 9+
  • Firefox 2.0+
  • Chrome 4+
  • Safari 3.1+
  • Opera 9.0+
  • iOS 3.2+
  • Android 2.1+

В случае, если к ‹canvas› обратились из браузера, который не поддерживает этот элемент, то пользователь увидит содержимое, помещенное внутри этого тега (такое содержимое называют аварийным), например:

‹canvas› Your browser is not support HTML5 Canvas! Please update your browser version! ‹/canvas›

Рисование на холсте

Перед тем, как начать рисовать, нужно получить от браузера контекст холста, то есть экземпляр объекта CanvasRenderingContext2D . Сделать это можно следующим образом:

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

Теперь можно приступить к рисованию. Следует помнить, что для рисования с помощью ‹canvas› потребуется понимание системы координат, где каждой точкой является пиксель на экране, а началом координат является верхний левый угол холста. Создадим новый холст, зададим для него атрибут > и добавим к нему рабочку, чтобы было удобнее следить за результатом:

Результат вы можете видеть ниже:

Для иллюстрации примеров будем использовать функцию CreateImage() , которая вызывается при загрузке страницы:

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

Для отображения прямоугольных фигур используются следующие методы:

  • strokeRect(x, y, width, height) — создает прямоугольник без заливки, где x и y — координаты верхнего левого угла прямоугольника, а width и height — соответственно ширина и высота прямоугольника
  • fillRect(x, y, width, height) — создает прямоугольник с заливкой. Значения параметров аналогичны методу strokeRect
  • clearRect(x, y, width, height) — очищает прямоугольную область. Значения параметров аналогичны методу strokeRect

Изменим функцию CreateImage() для демонстрации рисования двух прямоугольников:

Если в код функции CreateImage() добавить строку

То получится следующий результат:

Работа с цветом и толщиной линий

Изменять свойства пера, то есть цвет и толщину линий, можно изменяя свойства экземпляра обекта контекста CanvasRenderingContext2D . Для этих целей существуют следующие свойства:

  • strokeStyle — задает цвет линии контура. Все объекты, которые будут нарисованы позже будут иметь цвет контура, указанный этим свойством. Сам цвет задается в одном из форматов цвета CSS3. Например, rgba(r, g, b, a) или #RRGGBB . Могут использоваться и константы
  • fillStyle — это свойство задает цвет заливки внутри контура. Все объекты, которые будут нарисованы позже будут иметь цвет заливки, указанный этим свойством. Аналогично, цвет задается в формате CSS3
  • lineWidth — это свойство задает толщину линии в пикселях
Цукерберг рекомендует:  Вакансии Softomate

Следует учитывать, что нельзя назначать свойству strokeStyle значение свойства fillStyle и наооборот — это вызовет ошибку в скрипте. Добавим эти свойства в наш пример:

Работа с пером

Рисование более сложных объектов производится с помощью виртуального «пера». Для работы с ним существует ряд методов. Прежде всего нужно понять разницу между двумя основными методами:

  • moveTo(x,y) — смещает перо в точку с координатами x , y (перо поднято)
  • lineTo(x,y) — рисует линию из текущей координаты пера в точку с координатами x , y (перо опущено)

Изначально перо находится в начале коордиант — верхнем левом углу холста.

Начало рисования сложной линии должно начинаться вызовом метода beginPath() , а конец stroke() . Для того, чтобы замкнуть фигуру можно воспользоваться вызовом метода closePath() . Замкнутую фигуру можно залить цветом. Для этого вместо stroke() следует использовать fill(). Рассмотрим пример:

Результат работы скрипта представлен на нижнем рисунке

Рисование дуг и кривых

Для рисования дуг используется метод arc(x, y, r, start, end, direction) . Здесь x и y — координаты центра окружности, которой соответствует дуга, r — ее радиус, start — угол начала дуги, end — угол конца дуги, direction — логическое значение направления дуги ( true — по часовой стрелке, false — против часовой стрелки)

построит следующую дугу:

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

И в результате получится окружность:

На холсте также есть возможность изображать кривые — квадратичные и кубические (кривые Безье). Для этого необходимо воспользоваться следующими методами:

  • quadraticCurveTo (Px, Py, x, y) — создает квадратичную кривую
  • bezierCurveTo (P1x, P1y, P2x, P2y, x, y) — создает кривую Безье

Здесь x и у — это точки в которые необходимо перейти, а координаты P — это дополнительные точки, необходимые для построения кривых. Одна для квадратичной и две для кривой Безье. Рассмотрим пример:

Результат отображен на рисунке внизу:

Вставка текста

Существует два метода и несколько свойств для вывода и форматирования текста. Для вывода текста используют следующие методы:

  • strokeText(‘text’, x, y, width) — выводит на холст текст без заливки. Здесь ‘text’ выводимая строка, x и y — координаты верхнего левого угла блока с текстом на холсте, width — максимальная ширина блока с текстом. Если выводимый текст получается шире, холст выводит его либо шрифтом с уменьшенной шириной символов (если данный шрифт поддерживает такое начертание), либо шрифтом меньшего размера.
  • fillText(‘text’, x, y, width) — выводит на холст текст без контура, только заливкой. Все параметры повторяют аналогичные у метода strokeText().

Для форматирования текста есть несколько различный свойств:

  • font — свойство позволяет установить все возможные параметры выводимого шрифта. Соответствует аналогичному стилевому свойству font
  • textAlign — свойство позволяет выравнивать текст относительно блока вывода (точки, которая задается координатами x и y)
  • textBaseline — свойство позволяет задать вертикальное выравннивание текста относительно базовой линии

Пример вывода текста:

Размещение на холсте внешних изображений

Кроме рисования графических элементов на холсте можно разместить уже готовое изображение в любом из стандартных форматов. Для этого необходимо создать экземпляр объекта Image. Пример использования:

Javascript свойства и методы элемента canvas

HTML5 тег используется для отображения графики на лету при помощи скриптов (обычно JavaScript).

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

Метод getContext() возвращает объект, предоставляющий методы и свойства для рисования в элементе .

В данном справочнике приводится информация о свойствах и методах объекта getContext(«2d»), который может использоваться для вывода в элементе текста, линий, прямоугольников, кругов и др.

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают элемент и его свойства и методы. Internet Explorer 8 и более ранние версии не поддерживают элемент .

HTML5 и Canvas на JavaScript: от простого к сложному

С помощью свойств fillStyle и strokeStyle можно легко задать цвета, используемые для изображения заполненных фигур и штрихов. Значения цветов, которые можно использовать, такие же как и в CSS: шестнадцатеричные коды, rgb(), rgba() и даже hsla(), если браузер поддерживает это (например, это свойство поддерживается в Opera 10.00 и более поздних версиях).

С помощью fillRect можно рисовать заполненные прямоугольники. С помощью strokeRect можно рисовать прямоугольники, используя только границы, без заполнения. Если вы хотите очистить некоторую часть холста, можно использовать clearRect. Эти три метода используют одинаковые аргументы: x, y, width, height. Два первых аргумента сообщают координаты (x,y), а два последних аргумента задают ширину и высоту прямоугольника.

Чтобы изменить толщину линий, можно использовать свойство lineWidth. Давайте посмотрим на пример, который использует fillRect, strokeRect, clearRect и другие возможности:

Пример использования fillRect, strokeRect и clearRect

Пути холста позволяют рисовать произвольные фигуры. Вы чертите сначала «контур», затем выбираете для рисования штрих и в конце заполняете при желании фигуру. Создание специальной фигуры выполняется легко – чтобы начать рисовать путь, используйте beginPath(), затем начертите путь, который формирует фигуру с помощью прямых линий, кривых и других примитивов. Когда закончите, вызовите fill и stroke, если хотите заполнить фигуру или нарисовать штрихи, затем вызовите closePath(), чтобы закончить рисование фигуры.

Следующий пример показывает рисование треугольника:

Простой треугольник

Вставка изображений

Метод drawImage позволяет вставлять другие изображения (элементы img и canvas ) в контекст холста. В браузере Opera можно также рисовать изображения SVG внутри холста. Это достаточно сложный метод, который получает три, пять или девять аргументов:

  • Три аргумента: Базовый вариант drawImage использует один аргумент для указания на включаемое изображение, и два для определения координат места назначения внутри контекста холста.
  • Пять аргументов: Второй вариант использования drawImage включает приведенные выше три аргумента, плюс два для определения ширины и высоты вставляемого изображения (если вы захотите изменить его размер).
  • Девять аргументов: Самый развитый вариант использования drawImage включает кроме пяти аргументов два значения для координат внутри исходного изображения, и два значения для ширины и высоты внутри исходного изображения. Эти значения позволяют динамически обрезать исходное изображение перед вставкой в контекст холста.

Следующий пример кода показывает все три типа drawImage в действии:

Пример использования drawImage

Манипуляции с пикселями

API контекста 2D предоставляет три метода, которые помогают рисовать с точностью до пикселя:

  • createImageData,
  • getImageData,
  • и putImageData.

Пиксели хранятся в объектах типа ImageData. Каждый объект имеет три свойства: width, height и data. Свойство data имеет тип CanvasPixelArray, имеющий количество элементов равное width*height*4 ; это означает, что для каждого пикселя определяются значения красного, зеленого, синего цветов и alpha, в том порядке, в котором они должны появиться (все значения находятся в диапазоне от 0 до 255, включая alpha!). Пиксели упорядочиваются слева направо, ряд за рядом, сверху вниз.

С помощью возможностей ImageData можно делать значительно больше, чем только это. Например, можно выполнить фильтрацию изображения, или можно сделать математическую визуализацию (представьте фракталы или что-то еще). Следующий код показывает, как создать простой фильтр для инверсии цвета:

Фильтр инверсии цвета в действии

Текст

На объекте context имеются следующие свойства текста:

  • font: Определяет шрифт текста, таким же образом как свойство CSS font-family )
  • textAlign: Определяет горизонтальное выравнивание текста. Значения: start, end, left, right, center. Значение по умолчанию: start.
  • textBaseline: Определяет вертикальное выравнивание текста. Значения: top, hanging, middle, alphabetic, ideographic, bottom. Значение по умолчанию: alphabetic.

Для отображения текста имеется два метода: fillText и strokeText.

Первый из них изображает форму текста, заполненную с помощью текущего стиля fillStyle, в то время как второй изображает контур/границу текста используя текущий стиль strokeStyle. Оба получают три аргумента: текст для вывода, и координаты (x,y), определяющие место отображения. Существует также необязательный четвертый аргумент – максимальная ширина. Это приводит к тому, что браузер, если понадобится, сжимает текст, чтобы разместить его внутри заданной ширины.

Свойства выравнивания текста влияют на положение текста относительно координат (x,y), заданных в методах отображения.

Теперь пора обратиться к практике – следующий код является примером создания на холсте простого текста «hello world».

Отображение простого текста на холсте

API теней предоставляет четыре свойства:

  • shadowColor: Задает желательный цвет тени. Допустимые значения такие же как и значения цвета в CSS.
  • shadowBlur: Задает величину размытости на тени в пикселях. Чем меньше значение размытости, тем более резкой будет тень. Создает эффект очень похожий на размытость по Гауссу в Photoshop.
  • shadowOffsetX и shadowOffsetY: Определяет смещение тени по x и y в пикселях.

Использование вполне очевидно, как показано в следующем примере кода тени холста:

Пример тени холста – синий прямоугольник с красной тенью

Градиенты

Свойства fillStyle и strokeStyle могут также иметь присвоенные им объекты CanvasGradient вместо строк цвета CSS – это позволяет использовать цветовые градиенты для окрашивания линий и заполнений вместо однородных цветов.

Для создания объектов CanvasGradient можно использовать два метода: createLinearGradient и createRadialGradient. Первый из них создает линейный градиент – линии цвета все идут в одном направлении – в то время как второй создает радиальный градиент – цветовые окружности, расходящиеся из одной точки.

Когда имеется объект градиента можно добавить опорные точки цвета вдоль градиента, используя метод объекта addColorStop.

Следующий код показывает, как использовать градиенты:

Пример с использованием линейного градиента

Сетевые примеры использования холста

Если вы хотите узнать, что другие сделали с помощью холста, то можно посмотреть следующие проекты:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих