С чего начать работу с элементом canvas

Содержание

Создание элемента Canvas

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

<!DOCTYPE html>
<html>
<head>
    <title>Simple Example</title>
</head>

<body>

</body>

</html>

После того, как мы задали разметку пустого HTML-документа, пришло время для главного события, которое вы, наверное, с нетерпением ждете последние 30 секунд: продемонстрируем использования в JavaScript canvas на примере.

Добавление элемента Canvas

Элемент canvas определяется HTML-тегом с соответствующим названием - canvas, и он ведет себя, как любой другой элемент HTML. Добавить его можно с помощью следующего парного тега:

<canvas></canvas>
HTML5 Canvas: что это такое?

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

Визуализация холста

Чтобы визуализировать наш элемент canvas, давайте укажем некоторые стили CSS, чтобы добавить ему рамку. Добавьте внутри раздела head блок CSS, как показано ниже:

<!DOCTYPE html>
<html>

<head>
  <title>Simple Example</title>
  <style>
    canvas {
      border: #333 10px solid;
    }
  </style>
</head>
   .
   .
   .
</html>

Продолжим нашу работу с canvas в JavaScript. После того, как вы добавили этот код CSS, просмотрите страницу. Если все работает как надо, страница будет выглядеть следующим образом:

Визуализация холста

Как и следовало ожидать, CSS-код добавил к холсту темно-серую рамку шириной в 10 пикселей. Мы имеем доказательства того, что элемент canvas действительно «жив». Теперь, когда мы можем видеть наш canvas, не кажется ли вам, что он слишком мал? Давайте исправим это!

Изменение размеров элемента Canvas

По умолчанию элементы canvas имеют 300 пикселей в ширину и 150 пикселей в высоту. Но мы хотим чего-то большего. Например, 550 на 350 пикселей. Наверное, вы подумаете, что нужно добавить свойства ширины и высоты в код CSS. Как выясняется, вы не можете сделать это и получить желаемый результат.

Чтобы изменить размеры холста, добавьте атрибуты width и height непосредственно в HTML-код элемента canvas:

<canvas width="550px" height="350px"></canvas>
Все о мета тегах

Вы можете использовать CSS для установки размера, но при одном условии: нужно сохранить пропорции элемента canvas. Иначе установка размеров через HTML является единственным способом получить нужный размер, чтобы все пиксели на холсте не выглядели странно и растянуто.

Как вы поймете позже, в работе с элементом canvas JavaScript есть некоторые причуды, к которым мы должны относиться терпеливо.

Добавление идентификатора для элемента canvas

Зададим для элемента canvas значение идентификатора, чтобы можно было ссылаться на него в JavaScript. В тег элемента добавьте атрибут id и задайте для него значение myCanvas:

<canvas id="myCanvas" width="550px" height="350px"></canvas>

Полная разметка, которая должна у вас быть на данный момент, выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
  <title>Simple Example</title>
  <style>
    canvas {
      border: #333 10px solid;
    }
  </style>
</head>

<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>

</html>

На текущий момент я не советовал бы просматривать в браузере то, что у нас получилось: вы опять увидите пустой экран. Однако сейчас мы это изменим!

Создание контента

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

Добавление тегов script

Перед тем, как написать код, нам нужен тег script, в котором разместится созданный нами JavaScript. Вы можете использовать внешний файл JavaScript или сохранить весь код в том же документе. Для простоты я помещу весь код в разметку страницы, и это будет выглядеть следующим образом:

<!DOCTYPE html>
<html>

<head>
  <title>Simple Example</title>
  <style>
    canvas {
      border: #333 10px solid;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas" width="550px" height="350px"></canvas>

  <script>
  </script>

</body>

</html>
Тег HTML <select>

Теперь мы можем написать код, который будет взаимодействовать с canvas JavaScript.

Доступ к элементу canvas

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

var canvas = document.querySelector("#myCanvas");

Все, что мы делаем здесь, это инициализируем переменную canvas с привязкой к нашему элементу myCanvas, который мы определили ранее в HTML. Мы получаем ссылку на myCanvas с помощью функции querySelector. Она является более эффективным способом поиска элементов в HTML по сравнению со старыми функциями getElementById и getElementsByClass, с которыми вы, возможно, уже знакомы.

Получение контекста рендеринга

Еще несколько полезных мелочей. Для работы с canvas в JavaScript реализовано два режима. Один предназначен для рисования в 2D. О нем мы сейчас будем говорить. Другой режим связан с поддержкой рисования в 3D. Эти режимы более «формально» называются контекстами рендеринга.

Чтобы рисовать в элементе canvas, сначала нужно указать контекст рендеринга, который мы хотим использовать. Это делается через вызов метода getContext для объекта canvas и передачу в него в качестве аргумента контекста рендеринга 2D, который нам нужен:

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");

Переменная context теперь содержит ссылку на контекст рендеринга элемента canvas 2d,. Если говорить проще, подключив контекст рендеринга, мы получили канал, через который можно вызывать команды для получения пикселей, которые будут выводиться внутри холста! То есть для рисования.

Вызов команд

Теперь остается применить различные для canvas методы JavaScript, чтобы вывести на экран то, что нам нужно. Я не буду загружать вас теорией о том, что делают различные команды рисования и как использовать их. Вместо этого я сначала приведу вам код примера, чтобы вы увидели canvas в действии.

Добавьте следующие строки кода:

// нарисовать диагональную линию
context.moveTo(50, 50);
context.lineTo(450, 300);

// замкнуть контур
context.closePath();

// указать, как будет выглядеть наша линия
context.lineWidth = 45;
context.strokeStyle = "steelblue";

// нарисовать линию на холсте
context.stroke();

После того, как сделаете это, просмотрите HTML-страницу в браузере. Если все прошло успешно, на этот раз вы увидите кое-что реальное: толстую диагональную линию синего цвета:

Вызов команд

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

// нарисовать диагональную линию
context.moveTo(50, 50);
context.lineTo(450, 300);

Также у нас есть код, который, задает для canvas JavaScript толщину и цвет выводимой линии:

// указать, как будет выглядеть наша линия
context.lineWidth = 45;
context.strokeStyle = "steelblue";

Заключение

В этой статье мы создали базовый шаблон, который в дальнейшем будет использовать весь связанный с холстом контент. У нас в HTML-документе теперь есть элемент canvas с дополнительными встроенными стилями CSS и атрибутами HTML. После этого мы написали JavaScript, в котором сослались на элемент canvas, получили доступ к контексту рендеринга, а затем вызвали команды, необходимые для вывода пикселей.