HTML5 - холст

Элемент HTML5 <canvas> дает вам простой и эффективный способ рисования графики с помощью JavaScript. Его можно использовать для рисования графиков, создания фотокомпозиций или создания простых (и не очень простых) анимаций.

Вот простой элемент <canvas>, который имеет только два конкретных атрибута width и height плюс все основные атрибуты HTML5, такие как идентификатор, имя, класс и т. д.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Вы можете легко найти этот элемент <canvas> в DOM, используя метод getElementById () следующим образом:

var canvas = document.getElementById("mycanvas");

Давайте посмотрим на простой пример использования элемента <canvas> в документе HTML5.

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Это даст следующий результат -

Контекст рендеринга

<canvas> изначально пуст, и чтобы что-то отобразить, скрипту сначала необходимо получить доступ к контексту рендеринга и нарисовать его.

Элемент холста имеет метод DOM, называемый getContext, используемый для получения контекста визуализации и его функций рисования. Эта функция принимает один параметр, тип контекста2d.

Ниже приведен код для получения необходимого контекста вместе с проверкой, поддерживает ли ваш браузер элемент <canvas>.

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

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

Все последние версии Firefox, Safari, Chrome и Opera поддерживают HTML5 Canvas, но IE8 не поддерживает Canvas изначально.

Вы можете использовать ExplorerCanvas для поддержки холста через Internet Explorer. Вам просто нужно включить этот JavaScript следующим образом -

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

Примеры HTML5 Canvas

В этом руководстве рассматриваются следующие примеры, связанные с элементом HTML5 <canvas>.

Sr. No.	Примеры и описание
1	Рисование прямоугольников Узнайте, как нарисовать прямоугольник с помощью элемента HTML5 <canvas>
2	Пути рисования Узнайте, как создавать фигуры с помощью контуров в элементе HTML5 <canvas>
3	Рисование линий Узнайте, как рисовать линии с помощью элемента HTML5 <canvas>
4	Рисование Безье Узнайте, как нарисовать кривую Безье с помощью элемента HTML5 <canvas>
5	Рисунок квадратичный Узнайте, как нарисовать квадратичную кривую с помощью элемента HTML5 <canvas>
6	Использование изображений Узнайте, как использовать изображения с элементом HTML5 <canvas>
7	Создать градиенты Узнайте, как создавать градиенты с помощью элемента HTML5 <canvas>
8	Стили и цвета Узнайте, как применять стили и цвета с помощью элемента HTML5 <canvas>
9	Текст и шрифты Узнайте, как рисовать потрясающий текст, используя разные шрифты и их размер.
10	Узор и тень Узнайте, как рисовать разные узоры и тени.
11	Состояния холста Узнайте, как сохранять и восстанавливать состояния холста при выполнении сложных рисунков на холсте.
12	Перевод холста Этот метод используется для перемещения холста и его исходной точки в другую точку сетки.
13	Вращение холста Этот метод используется для поворота холста вокруг текущего начала координат.
14	Масштабирование холста Этот метод используется для увеличения или уменьшения единиц в сетке холста.
15	Преобразование холста Эти методы позволяют вносить изменения непосредственно в матрицу преобразования.
16	Композиция на холсте Этот метод используется для маскировки определенных областей или удаления участков с холста.
17	Анимация холста Узнайте, как создать базовую анимацию с помощью холста HTML5 и JavaScript.