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.