canvas в HTML


Содержание

10 крутых примеров работы HTML5 Canvas

Холст — интересная особенность в HTML5 Canvas которая позволяет рисовать разнообразные вещи в браузере с помощью технологии Java. Например его можно использовать для управления фотографий, рисовать и анимировать разнообразные формы и фигуры, а так же воспроизводить видео. Но это ещё далеко не придел.

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

Радужный дождь

Действительно удачный пример анимации работающей на HTML5 Canvas, как будто с неба льёт радужный дождь. Очень красиво смотрится.

Частицы

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

Анимированные круги

Интересный и не сильно сложный эффект работающий на HTML5 Canvas. Тут несколько кругов, которые плавно меняют свою форму, таким образом получается красивый визуальный эффект.

Геометрическая анимация

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

Анимационные шары

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

Созвездие

Тут созданы случайно двигающиеся звёзды, а при наведении мыли они соединяются линиями. Очень красиво сделанное демо.

Молния

Отличная и удачная имитация молнии с помощью HTML5 Canvas. Смотрится очень достойно и потрясающе!

Радужный осьминог

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

Найди курсор

Этот пример отслеживает расположение курсора указывая на него стрелками

Механическая трава

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

HTML тег

Элемент (от англ. «canvas» ‒ «холст, полотно») определяет область, в которой можно рисовать при помощи скриптов (например, JavaScript). Так в скриптах можно создать графики (рисунки, анимацию, игры) с выводом их в указанный контейнер .

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

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:

Элемент Canvas

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


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

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

Базовые возможности Canvas

Элемент предоставляет рабочее пространство для рисования. С точки зрения разметки, это простой до предела элемент с тремя атрибутами — id, width и height:

Атрибут id присваивает данному холсту однозначное имя, требуемое для его идентификации кодом JavaScript А атрибуты width и height устанавливают ширину и высоту холста в пикселах, соответственно.

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

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

Полученный результат, который будет нашей отправной точкой в изучении Canvas показан на рисунке:

Чтобы рисовать на холсте, нужно написать определенный объем кода JavaScript. Эта задача состоит из двух этапов. Первым делом наш сценарий должен получить объект холста, для чего используется метод document.getElementById. Затем надо получить двумерный контекст рисования, для чего применяется метод getContext():

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

Тот факт, что контекст явно называется двумерным (и в коде указывается как «2d»), порождает очевидный вопрос, а именно: существует ли трехмерный контекст рисования? Ответ на этот вопрос — пока нет, но ясно, что создатели HTML5 оставили место для него в будущем.

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

В разделе разметки для холста создается рамка, указывающая его местонахождение на странице. А в разделе

Вершины фигур, создаваемые соединяющимися линиями, можно оформить тремя разными способами, присваивая свойству контекста lineJoin соответствующие значения. Значение round округляет вершины, значение mitre соединяет линии в вершине «под ус», а значение bevel обрезает вершины прямой линией. По умолчанию свойству lineJoin присвоено значение mitre.

В большинстве случаев, чтобы создать сложную фигуру, ее очертания нужно создавать пошагово, по одному отрезку за раз. Но одна фигура является достаточно важной, и для нее выделен отдельный метод. Это прямоугольник. Заполнить прямоугольную область заливкой можно за один шаг методом fillRect(), которому в параметрах передаются координаты левого верхнего угла, ширина и высота прямоугольника. В один присест, используя метод strokeRect(), также можно нарисовать и очертания прямоугольника.

Цвет заливки для метода fillRect() устанавливается так же, как и для метода fill() свойством fillStyle. Толщина и цвет линий прямоугольника определяются текущими значениями свойств lineWidth и strokeStyle, точно так же, как для метода stroke().

Например, следующий код заполняет заливкой прямоугольную область размером 100×200 пикселов с левым верхним углом в точке (100, 40):

Кривые линии

Чтобы рисовать что-то более сложное, чем линии и прямоугольники, нужно изучить следующие четыре метода: arc(), arcTo(), bezierCurveTo() и quadraticCurveTo(). Все эти методы рисуют кривые линии, и хотя каждый делает это по-своему, все они требуют хотя бы небольших (а некоторые и больших) знаний математики.

Изо всех этих методов самый простой — метод arc(), который рисует дугу. Чтобы нарисовать дугу, нужно сначала представить себе в уме полный круг, а потом решить, какую часть его окружности вы хотите рисовать:

Дуга выглядит достаточно простой фигурой, но чтобы полностью ее описать, требуется несколько единиц информации. Сначала нужно нарисовать воображаемый круг. Для этого надо знать координаты центра (1) и радиуса (2), который определяет размер круга. Далее следует описать длину дуги на окружности, для чего требуется угол начала дуги (3) и угол ее окончания (4). Значения углов должны быть в радианах, которые выражаются через число π. Угол всей окружности равен 2π, половины — 1π и т.д.

Собрав все необходимые данные, передаем их методу arc():

Дугу можно закрыть, соединив ее концы прямой линией. Для этого нужно вызвать метод closePath() перед тем, как вызывать метод stroke(). Кстати, окружность — это та же дуга, просто с углом 2π. Рисуется окружность следующим образом:

Метод arc() нельзя применять для рисования овала (вытянутого круга). Для этого нужно использовать либо более сложные методы для рисования кривых, либо применить трансформации.

Три других метода рисования кривых — arcTo(), bezierCurveTo() и quadraticCurveTo() — могут быть несколько посложнее для тех, кто не в ладах с геометрией. Они основаны на принципе контрольных точек, т.е. точек, которые сами не являются частью кривой, но управляют ее формой. Наиболее известным типом таких кривых являются кривые Безье, которые используются практически в каждой программе рисования. Причиной популярности этого метода является, его способность создавать плавные кривые, независимо от их размера.

Кривая Безье создается следующим кодом:

Контур сложной фигуры часто состоит из ряда дуг и кривых, соединяющихся друг с другом. По окончанию рисования всех составляющих можно вызвать метод closePath(), чтобы обвести или закрасить всю фигуру. Чтобы побольше узнать о кривых Безье, лучше поэкспериментировать с ними, а хорошую игровую площадку для этого можно найти на этой странице: Canvas Bézier Curve Example.

Илон Маск рекомендует:  Фильтр MaskFilter

Рисование на холсте для тех, кто ненавидит математику

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

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

Зачем набивать себе шишки на лбу, если можно использовать готовую библиотеку для рисования кругов, треугольников, овалов и многоугольников за один прием? Идея простая — вызывается метод высшего уровня (скажем, fillEllipse(), которому передаются соответствующие координаты), и библиотека JavaScript преобразует все это в требуемую операцию на холсте. В качестве двух хороших примеров такой библиотеки можно назвать CanvasPlus и Artisan JS. Но эти, и другие, библиотеки продолжают развиваться, поэтому еще рано говорить, какие из них выживут и окажутся пригодными для профессионального применения.

Рисовать растровые изображения

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


Использовать профессиональный инструмент

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

В этом отношении представляет интерес одно из таких средств — модуль Ai->Canvas для Adobe Illustrator. Данный модуль преобразует созданную в Adobe Illustrator графику в страницу HTML с кодом JavaScript, который воспроизводит эту графику на холсте.

HTML 5 Canvas для начинающих

Спецификация HTML 5 включает множество новых функций, одной из которых является тег canvas . HTML 5 Canvas (канва HTML 5) предоставляет простой и мощный способ вывода графики и рисования с использованием JavaScript. Для каждого элемента canvas можно использовать контекст, в котором нужно вызвать команды JavaScript для рисования на Canvas. Браузеры могут реализовывать несколько контекстов элемента canvas и предоставлять различные API для рисования. Следует также помнить, что рисование происходит в растровой форме, то есть, нарисовав на канве какую-либо фигуру, её нельзя будет изменить или удалить отдельно, — можно только стереть целую область канвы.

Большинство современных браузеров предоставляют возможности 2D-контекста (2D Canvas) — Opera, Firefox, Konqueror и Safari. Кроме того существуют экспериментальные сборки браузера Opera, которые включают поддержку 3D-контекста (3D Canvas), а также дополнение к Firefox, которое реализует поддержку 3D Canvas:

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

Основы использования Canvas

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

Нужно добавить идентификатор к элементу canvas , чтобы потом обратиться к нему в JavaScript, также необходимо задать атрибуты width и height для определения ширины и высоты элемента canvas .

Для рисования внутри элемента canvas , нужно использовать JavaScript. Сначала нужно найти созданный тег canvas с помощью функции getElementById , а потом инициализировать нужный контекст. Как только это будет сделано, можно начинать рисование на канве, используя доступные API-команды выбранного контекста. Следующий скрипт рисует простой прямоугольник на канве (просмотреть пример использования Canvas):

Canvas 2D API

Заливки и границы фигур

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

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

Для изменения толщины линий можно использовать свойство lineWidth . Пример использования функций fillRect, strokeRect, clearRect:

Этот пример приведет к следующему результату:

Окружность и круг

Чтобы нарисовать окружность, нужно выполнить такой код:

Кривые Безье

Для создания кривых Безье в HTML5 Canvas можно использовать метод bezierCurveTo() . Кривые Безье задаются с помощью начальной точки, двух контрольных точек и конечной точки. В отличие от квадратичных кривых, кривые Безье в HTML 5 Canvas определяются двумя контрольными точками вместо одной, позволяя создавать кривые с более сложным очертанием.

Метод bezierCurveTo() выглядит следующим образом :

Пример рисования кривой Безье в HTML 5 Canvas:

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

Схема построения кривой Безье:

Контуры

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

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

Этот пример будет отображен в браузере следующим образом:

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

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

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


Спецификация HTML 5 объясняет эти аргументы следующим образом:

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

Так будет выглядеть этот пример в браузере:

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

2D Context API предоставляет три метода, которые позволяют выполнять попиксельное рисование: createImageData , getImageData и putImageData .

Пиксели хранятся в объектах типа ImageData . Каждый объект имеет три свойства: width , height и data . Свойство data имеет тип CanvasPixelArray и содержит массив элементов размером width*height*4 байт; это означает, что каждый пиксель содержит цвет в формате RGBA. Пиксели упорядочены слева направо, сверху вниз, построчно.

Чтобы лучше понять этот механизм, рассмотрим пример отрисовки блока из красных пикселей.

Примечание: пока не все современные браузеры реализуют метод createImageData . В таких браузерах необходимо получать объект ImageData , используя метод getImageData (Пример кода для таких браузеров).

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

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

Текст

В настоящее время Text API доступен только в последних сборках движка WebKit, а также в Firefox 3.1 и выше.

Следующие свойства текста доступны для объекта контекста:

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

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

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

Так этот пример будет выглядеть в браузере:

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

  • shadowColor : Определяет цвет тени. Значения допустимы в том же формате, что и в CSS.
  • shadowBlur : Определяет степень размытия тени в пикселях. Эффект очень похож на гауссово размытие в Photoshop.
  • shadowOffsetX и shadowOffsetY : Определяет сдвиг тени в пикселях (x, y).

Так будет выглядеть пример тени в браузере:

Градиенты

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

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

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

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

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

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

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

Выводы

Canvas — одна из самых интересных возможностей HTML 5, которую уже можно использовать во многих современных браузерах. Canvas предоставляет возможности для создания игр и пользовательских интерфейсов совершенно нового уровня. 2D context API включает в себя множество функций, часть из которых не была описана в этой статье, но я надеюсь, вы получили все знания, необходимые для начала работы с Canvas.

Рисование встроенными средствами 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).

Илон Маск рекомендует:  Что такое код ncurses_slk_touch

Поэтому для поддержки огромной доли рынка мобильных устройств с возможностью подключения к сети Интернет анимацию начали создавать при помощи 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 — это свойство задает толщину линии в пикселях

Следует учитывать, что нельзя назначать свойству 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


The HTML element is used to draw graphics on a web page.

The graphic to the left is created with . It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

What is HTML Canvas?

The HTML element is used to draw graphics, on the fly, via JavaScript.

The element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
4.0 9.0 2.0 3.1 9.0

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

Here is an example of a basic, empty canvas:

Your browser does not support the canvas element.

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

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

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

Илон Маск рекомендует:  Zend машина

Что такое 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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

API Canvas (Холст) — краткий справочник

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

В API Canvas (Холст) входят следующие методы:

— getContext(context). Создает контекст для холста, на котором вы затем будете рисовать. Принимает одно из двух значений: 2d или 3d для двухмерной и трехмерной графики соответственно;


— fillRect(x, y, width, height). Позволяет нарисовать прямо на холсте, в точке (x, y), залитый цветом прямоугольник со сторонами width и height;

— strokeRect(x, y, width, height). Рисует прямо на холсте, в точке (x, y), прямоугольный контур со сторонами width и height;

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

— createLinearGradient(x1, y1, x2, y2). Создает линейный градиент, который затем можно привязать к фигуре, как любой другой цвет, — через свойство fillStyle. В атрибутах необходимо указать только начальную и конечную позиции градиента (относительно холста). Для объявления цветов градиента данный метод необходимо сочетать с методом addColorStop();

— createRadialGradient(x1, y1, r1, x2, y2, r2). Создает радиальный градиент, который затем можно привязать к фигуре, как любой другой цвет, — через свойство fillStyle. Градиент состоит из двух окружностей. Атрибуты метода определяют только позиции и радиусы окружностей (относительно холста). Для объявления цветов градиента данный метод необходимо сочетать с методом addColorStop();

— addColorStop(position, color). Применяется для объявления цветов градиента. Атрибут position принимает значение от 0,0 до 1,0 и указывает, в какой точке цвет начинает растворяться;

— beginPath(). Используется для объявления начала нового пути;

— closePath(). Можно добавить в конце пути, для того чтобы закрыть его. Создает прямую линию между последней позицией пера и начальной точкой пути. Метод не обязательно применять в случаях, когда путь должен оставаться открытым или когда для визуализации пути используется метод fill();

— stroke(). Предназначен для визуализации контура пути;

— fill(). Предназначен для визуализации пути как фигуры, залитой сплошным цветом;

— clip(). Применяется для создания новой области обрезки в форме пути. Если графические объекты отправляются на холст после вызова данного метода, то отображаются только те их фрагменты, которые попадают внутрь фигуры;

— moveTo(x, y). Переносит виртуальное перо в новое местоположение. Следующий метод продолжит рисование пути с этой точки;

— lineTo(x, y). Добавляет к пути прямую линию, начиная от текущей позиции пера и до точки, определяемой атрибутами x и y;

— rect(x, y, width, height). Добавляет к пути прямоугольник в точке (x, у) со сторонами width и height;

— arc(x, y, radius, startAngle, endAngle, direction). Добавляет к пути дугу. Центр дуги находится в точке (x, у), начальный и конечный углы объявляются в радианах, а direction — это булево значение, указывающее направление: по часовой стрелке или против часовой стрелки. Для преобразования градусов в радианы используйте формулу Math. PI/180 х градусы;

— quadraticCurveTo(cpx, cpy, x, y). Добавляет к пути квадратичную кривую Безье. Кривая начинается в текущей позиции пера и заканчивается в точке (x, у). Атрибуты cpx и cpy определяют позицию контрольной точки, которая задает форму кривой;

— bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y). Добавляет к пути кубическую кривую Безье. Кривая начинается в текущей позиции пера и заканчивается в точке (x, у). Атрибуты cp1x, cp1y, cp2x и cp2y определяют позиции двух контрольных точек, которые задают форму кривой;

— strokeText(text, x, y, max). Рисует контурный текст прямо на холсте. Атрибут max необязательный, он задает максимальный размер текста;

— fillText(text, x, y, max). Рисует прямо на холсте текст, представляющий собой залитые цветом фигуры. Атрибут max необязательный, он задает максимальный размер текста;

— measureText(text). Вычисляет размер области, которую текст займет на холсте при визуализации с текущими стилями. Для обращения к получившемуся значению используется свойство width;

— translate(x, y). Переносит начало координат холста в точку (x, у). Первоначально точка с координатами (0, 0) находится в верхнем левом углу области, соответствующей элементу ;

— rotate(angle). Поворачивает холст вокруг начала координат. Величину угла нужно указывать в радианах. Для преобразования градусов в радианы используйте формулу Math. PI/180 х градусы;

— scale(x, y). Меняет масштаб холста. Значения по умолчанию (1,0, 1,0). Можно также задавать отрицательные значения;

— transform(m1, m2, m3, m4, dx, dy). Модифицирует матрицу трансформации холста. Новые значения матрицы вычисляются на основе предыдущих;

— setTransform(m1, m2, m3, m4, dx, dy). Модифицирует матрицу трансформации холста. Отменяет предыдущие модификации матрицы и задает новые значения;

— save(). Сохраняет текущее состояние холста, включая значения матрицы трансформации, свойства стилизации и маску обрезки;

— restore(). Восстанавливает последнее сохраненное состояние холста, включая матрицу трансформации, свойства стилизации и маску обрезки;

— drawImage(). Выводит на холст изображение и поддерживает три варианта синтаксиса. Синтаксис drawImage(image, x, y) позволяет вывести изображение на холст в точке (x, y). Синтаксис drawImage(image, x, y, width, height) позволяет вывести изображение на холст в точке (x, y), с новыми размерами, определяемыми параметрами width и height. Синтаксис drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2) позволяет вырезать из исходного изображения часть, определяемую параметрами x1, y1, widthl и heightl, и вывести ее на холст в точке (x2, y2) с новыми размерами width2 и height2;

— getImageData(x, y, width, height). Считывает содержимое фрагмента холста и сохраняет его в виде объекта. К значениям объекта можно обращаться через свойства width, height и data. Первые два свойства возвращают размер вырезанного фрагмента изображения, а свойство data возвращает массив значений, описывающих цвета пикселов. Для доступа к значениям используйте формулу (width х y) + (x х 4);

— putImageData(imagedata, x, y). Визуализирует данные, сохраненные в объекте imagedata, как изображение на холсте;

— createImageData(width, height). Создает новое изображение в формате набора данных. Первоначально все пикселы изображения черные прозрачные. Вместо параметров width и height метод может принимать в качестве атрибута данные изображения. В таком случае размер

Нового изображения соответствует размеру, закодированному в этом наборе данных;

— createPattern(image, type). Создает на основе данных изображения узор, который затем можно привязать к фигуре с помощью свойства fillStyl e, как любой другой цвет. Возможные значения атрибута type — repeat, repeat-x, repeat-y и no-repeat.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL