Базовое использование Canvas
============================

* « Предыдущая статья
* Следующая статья »

Давайте начнём этот урок с изучения элемента `<canvas>` как такового. В конце этой страницы вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.

Элемент `<canvas>`
------------------


```html
<canvas id="tutorial" width="150" height="150"></canvas>
```


Он выглядит как элемент `<img>`, но его отличие в том, что он не имеет атрибутов `src` и `alt`. Элемент `<canvas>` имеет только два атрибута - **ширину** и **высоту**. Оба они не обязательны и могут быть выставлены с использованием свойств DOM (en-US). Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной **300 пикселей** и в высоту **150 пикселей**. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.

**Примечание:** Если вид вашего изображения кажется вам искажённым, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах <canvas> , а не с помощью CSS.

Атрибут id не специфичен для элемента `<canvas>,` но он может быть применён по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать `id`, так как это позволяет намного проще идентифицировать наш элемент в сценарии.

Элемент `<canvas>` может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.

### Запасное содержимое

Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент `<canvas>`, вам следует предоставить запасное содержимое для отображения этими браузерами.

Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента `<canvas>`. Браузеры, которые не поддерживают `<canvas>` проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают `<canvas>` проигнорируют запасное содержимое, и просто нормально отобразят canvas.

Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:


```html
<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt="" />
</canvas>
```


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

### Требуется тег `</canvas>`

В отличии от элемента `<img>`, элемент `<canvas>` **требует** закрывающийся тег (`</canvas>`). Если этот тег не предоставлен, остаток документа будет считаться запасным контентом и не будет отображён.

Если запасной контент не нужен, простой `<canvas id="foo" ...></canvas>` полностью совместим со всеми браузерами, что поддерживают canvas.

Рендеринг содержимого (контекста)
---------------------------------

Элемент `<canvas>` в документе создаётся с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на OpenGL ES.

Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент `<canvas>` имеет метод `getContext()`, используется для получения контекста визуализации и её функции рисования. `getContext()` принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку "2d".


```js
const canvas = document.getElementById("tutorial");
const ctx = canvas.getContext("2d");
```


В первой строке скрипта мы получаем узел нашего холста `<canvas>`, далее с помощью `document.getContext()` метода мы присваиваем ему контекст. Имея узел элемента , вы всегда можете получить для рисования контекст при помощи метода `getContext()`.

Проверка поддержки
------------------

Ранее уже упоминалось, что в браузерах, которые не поддерживают `<canvas>` отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер `canvas`, можно прямо из кода, проверив наличие метода `getContext()`. Код с запасным содержимым, который мы приводили Выше, становится следующим:


```js
const canvas = document.getElementById("tutorial");

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

Скелет шаблона
--------------

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

**Примечание:** вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.


```html
<!doctype html>
<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
 function draw() {
 const canvas = document.getElementById("tutorial");
 if (canvas.getContext) {
 const ctx = canvas.getContext("2d");
 }
 }
 </script>
    <style type="text/css">
 canvas {
 border: 1px solid black;
 }
 </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>
```


Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путём события `load (en-US)` в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов `window.setTimeout()` (en-US), `window.setInterval()` (en-US), или любым другим обработчиком события, когда страница будет загружена.

Вот как шаблон будет выглядеть в действии.

Простой пример
--------------

Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.


```html
<!doctype html>
<html>
  <head>
    <script type="application/javascript">
 function draw() {
 const canvas = document.getElementById("canvas");
 if (canvas.getContext) {
 const ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect(10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect(30, 30, 55, 50);
 }
 }
 </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>
```


Этот пример выглядит так:

| Screenshot | Live sample |
| --- | --- |
|  |  |

* « Предыдущая статья
* Следующая статья »