Учебники

HTML5 — холст

Август 22, 2018

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

Вот простой элемент <canvas>, который имеет только два определенных атрибута: ширину и высоту плюс все основные атрибуты HTML5, такие как id, name и class и т. Д. 

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

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

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

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

Live Demo 

<!DOCTYPE HTML>

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

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

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

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

Элемент 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>.

Узнайте, как рисовать прямоугольник с помощью элемента HTML5 <canvas>

Узнайте, как создавать фигуры, используя контуры в элементе HTML5 <canvas>

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

Узнайте, как нарисовать кривую Безье, используя HTML5 элемент <canvas>

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

Узнайте, как использовать изображения с элементом HTML5 <canvas>

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

Узнайте, как применять стили и цвета с помощью элемента HTML5 <canvas>

Узнайте, как рисовать удивительный текст, используя разные шрифты и их размер.

Узнайте, как рисовать различные узоры и тени.

Узнайте, как сохранять и восстанавливать состояния холста при выполнении сложных рисунков на холсте.

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

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

Этот метод используется для увеличения или уменьшения единиц в сетке холста.

Эти методы позволяют вносить изменения непосредственно в матрицу преобразования.

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

Узнайте, как создать базовую анимацию, используя HTML5 canvas и JavaScript.

45
Share: