• Назад
• Далее

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

Элемент<canvas>

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

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

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

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

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

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

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

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

<canvas width="150" height="150">  current stock price: $3.15 +0.15</canvas><canvas width="150" height="150">  <img src="images/clock.png" width="150" height="150" alt="" /></canvas>

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

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

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

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

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

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

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

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

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

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

Ранее уже упоминалось, что в браузерах, которые не поддерживают<canvas> отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер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>  <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 width="150" height="150"></canvas>  </body></html>

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

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

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

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

<!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 width="150" height="150"></canvas>  </body></html>

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

• Назад
• Далее