Базовое использование холста

• Предыдущая
• Следующая

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

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

На первый взгляд элемент <canvas> похож на элемент <img>, единственное явное отличие в том, что у него нет атрибутов src и alt. Действительно, элемент <canvas> имеет только два атрибута, width и height. Оба они необязательны и также могут быть заданы с помощью свойств DOM properties. Если атрибуты width и height не указаны, холст будет первоначально иметь ширину 300 пикселей и высоту 150 пикселей. Элемент может быть произвольно изменен размером с помощью CSS, но во время отрисовки изображение масштабируется для соответствия размеру макета: если масштабирование CSS не соответствует пропорциям исходного холста, он будет искажен.

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

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

Элемент <canvas>, как и элементы <img>, <video>, <audio> и <picture>, должен быть доступным, предоставляя резервный текст для отображения, когда медиа не загружается или пользователь не может его использовать должным образом. Всегда следует предоставлять резервный контент, подписи и альтернативный текст, соответствующий типу медиа.

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

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

<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="A clock" />
</canvas>

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

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

Если резервное содержимое не требуется, простой <canvas id="foo" role="presentation" …></canvas> полностью совместим со всеми браузерами, поддерживающими canvas. Это следует использовать только в том случае, если холст используется исключительно для презентации.

Элемент <canvas> создает фиксированную область рисования, которая предоставляет один или несколько контекстов отрисовки, которые используются для создания и манипулирования отображаемым содержимым. В этом руководстве мы сосредоточимся на контексте отрисовки 2D. Другие контексты могут предоставлять различные типы отрисовки; например, WebGL использует 3D-контекст на основе OpenGL ES.

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

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

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

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

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

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

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Canvas tutorial</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="tutorial" width="150" height="150"></canvas>
    <script>
      function draw() {
        const canvas = document.getElementById("tutorial");
        if (canvas.getContext) {
          const ctx = canvas.getContext("2d");
        }
      }
      window.addEventListener("load", draw);
    </script>
  </body>
</html>

Скрипт включает функцию, называемую draw(), которая выполняется после загрузки страницы; это делается путём прослушивания события load документа. Эту функцию или аналогичную можно также вызвать с помощью setTimeout(), setInterval() или любого другого обработчика событий, при условии, что страница была загружена.

Вот как шаблон будет выглядеть в действии. Как показано здесь, он первоначально пуст.

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Canvas experiment</title>
  </head>
  <body>
    <canvas id="canvas" width="150" height="150"></canvas>
    <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, 50, 50);

          ctx.fillStyle = "rgb(0 0 200 / 50%)";
          ctx.fillRect(30, 30, 50, 50);
        }
      }
      draw();
    </script>
  </body>
</html>

Этот пример выглядит следующим образом:

• Предыдущий
• Следующий