Canvas API— это интерфейс для отрисовки графики в браузере. С помощью HTML-элемента <canvas> можно создавать холст (именно так canvas переводится с английского) и рисовать графику внутри него с помощью JavaScript-кода.

<canvas id="canvas"></canvas>

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

В реальной разработке для создания сложных графиков чаще всего используют специальные библиотеки. Например, Chart.js или подобные. Но они сами в большинстве случаев под капотом работают на Canvas, поэтому полезно понимать, как он устроен.

💫 Научитесь создавать анимации

Приходите на наши курсы — изучите самые популярные и интересные техники для создания эффектов на CSS и JavaScript.

Шаг 1. Напишем разметку

Создание графика начнём, конечно, с разметки. Кроме самого элемента <canvas> мы также сверстаем небольшую форму, которая будет принимать на вход значения. Так мы сможем динамически обновлять график с учётом введённых данных.

<section class="chart">
    <h1 class="chart__title">Популярность языков программирования</h1>

    <form class="chart__data" action="#" method="POST">
      <div class="chart__input-group">
        <label class="chart__label" for="javascript">JavaScript</label>
        <input
          class="chart__input input-field"
          type="number"
          name="javascript"
          id="javascript"
          min="0"
          max="100"
          required
        >
        <span>%</span>
      </div>

      <!-- Остальные поля ввода: PHP и Python -->

      <input
        class="chart__submit-button input-field"
        type="submit"
        value="Показать график"
      >
    </form>

    <div class="chart__canvas-wrapper">
      <canvas id="canvas" width="500" height="250">
        Браузер не поддерживает Canvas
      </canvas>
    </div>
  </section>

На что здесь стоит обратить внимание:

  • Вместо пути в атрибуте action мы оставили заглушку #. В теории нам может понадобится отправить на сервер данные, введённые пользователем, но пока такая задача не стоит.
  • Для каждого поля ввода прописали атрибут name, в котором отражено его назначение. Например, в нашем случае значение javascript поможет нам использовать полученные данные при отрисовке графика.
  • Так как значения в полях ввода должны задаваться в процентах, мы установили диапазон допустимых значений с помощью min и max.
  • Элементу <canvas> прописали размер 500×250 пикселей. По умолчанию он равен 300×150 пикселей.
  • Внутри <canvas> оставили информационное сообщение на случай, если браузер пользователя не поддерживает технологию.

Стилизация элементов будет максимально простой, поэтому не будем её разбирать в рамках туториала. Стили можно посмотреть в файле style.css в интерактивной демонстрации.

Шаг 2. Соберём данные для графика

Прежде чем рисовать график, нам нужно получить данные из формы. Для этого найдём все поля ввода в форме и создадим на основе введённых значений массив объектов с информацией о каждом элементе графика. В нашем случае это будут языки JavaScript, PHP и Python — три объекта.

const COLORS = [
  `#b3d5fc`,
  `#98d9d9`,
  `#ede493`
];

const inputElements = document.querySelectorAll(`.chart__input`);

const getData = (inputElements) => {
  return Array.from(inputElements).map((input, index) => ({
    name: input.name,
    value: input.value,
    color: COLORS[index]
  }));
};

const items = getData(inputElements);

Функция getData() получает на вход коллекцию элементов, преобразует её в массив, а затем на основе каждого элемента создаёт объект с нужными для нашего графика данными: названием (язык программирования), значением (популярность в процентах) и цветом (его будем использовать для рисования столбца на графике).

Для задания цвета мы прибегли к самому примитивному способу — просто завели константу с нужным количеством цветов и присвоили каждому из объектов соответствующий по индексу цвет. В реальной разработке лучше получить цвет другим способом — например, сгенерировать в формате HEX с помощью JavaScript. Тогда получится избежать жёсткой привязки к количеству элементов.

Шаг 3. Подготовим холст

Начнём работу над созданием графика. Из элемента <canvas> можно получить объект, который называется контекстом отрисовки. Объект содержит свойства и методы для рисования, именно с помощью него можно создавать весь контент внутри Canvas, а также манипулировать им. Для получения объекта контекста нужно воспользоваться методом getContext():

const canvas = document.querySelector(`#canvas`);
const ctx = canvas.getContext(`2d`);

В качестве параметра в метод getContext() мы передали значение 2d — это контекст отрисовки для работы с двумерной графикой. Именно его мы будем использовать, но есть и другие — например, webgl для трёхмерной графики.

Шаг 4. Нарисуем график

Свойства и методы контекста отрисовки

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

  • fillStyle — свойство определяет цвет заливки элементов. Например, текста или геометрической фигуры.
  • font — свойство задаёт параметры шрифта. Синтаксис такой же, как у CSS-свойства font.
  • fillText(text, x, y) — отрисовывает строку text, начиная с указанных координат. Координата x определяет расстояние от точки отсчёта по горизонтальной оси, а y — по вертикальной. Начало отсчёта холста расположено в левом верхнем углу.
  • fillRect(x, y, width, height) — рисует прямоугольник с заливкой с указанными шириной и высотой, начиная с координат x и y.
  • clearRect(x, y, width, height) — очищает прямоугольник, описанный параметрами. Можно использовать для очистки холста при перерисовке.
  • translate(x, y) — перемещает начало координат холста на x по горизонтали и y по вертикали относительно начального положения.
  • rotate(angle) — поворачивает систему координат по часовой стрелке на указанный угол. Значение задаётся в радианах.
  • save() — сохраняет текущее состояние холста, в том числе заданные свойства (например, fillStyle и font).
  • restore() — применяет сохранённое ранее состояние холста.

Константы и перечисления

Этот пункт можно было бы пропустить и, если нам в коде понадобилось бы значение, например, ширины столбца графика, написать просто 50. Такие числа в программировании называются «магическими» и считаются плохой практикой в реальной разработке. И для этого есть несколько веских причин. Например, если число нужно будет изменить, то это придётся делать в каждом фрагменте программы, где оно используется. А ещё часто из контекста может быть неясно, что это вообще за число. Эту проблему как раз решают константы с понятным названием. Мы будем привыкать сразу писать хороший код, поэтому вынесем все значения в константы. А если несколько констант относятся к одной сущности, объединим их в перечисления.

const MAX_PERCENTAGE = 100;

const Gap = {
  HORIZONTAL: 100,
  VERTICAL: 30
}

const BarCoordinate = {
  INITIAL_X: 80,
  INITIAL_Y: 220
}

const BarSize = {
  MAX_HEIGHT: 190,
  WIDTH: 50
};

const LabelCoordinate = {
  INITIAL_X: 30,
  INITIAL_Y: 70
}

const Font = {
  SIZE: `18px`,
  FAMILY: `Tahoma`
};

Здесь всё, что нам понадобится для рисования графика — начальные координаты элементов, размеры, отступы, параметры шрифта.

Сдвиг системы координат

При отрисовке графика мы будем использовать сочетание методов translate() и rotate():

ctx.translate(0, canvas.height);
ctx.rotate(-Math.PI/2);

Такая комбинация позволяет поменять систему координат по умолчанию, точка отсчёта которой расположена в верхнем левом углу. Код повернёт систему координат на 90 градусов против часовой стрелки и сдвинет вниз на высоту холста. Так она выглядит до и после:

График

Теперь нам нужно воспользоваться методами 2d контекста, которые мы разобрали выше, и нарисовать график на основе данных из формы.

// Получаем на вход items — массив объектов с данными
const renderChart = (items) => {
  // Очищаем всю область холста
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Задаём координаты для первого столбца и подписи
  let currentBarX = BarCoordinate.INITIAL_X;
  let currentLabelY = LabelCoordinate.INITIAL_Y;
    // Определяем горизонтальный отступ между соседними столбцами
    const gapBetweenBars = BarSize.WIDTH + Gap.HORIZONTAL;

  // Проходим в цикле по каждому объекту в массиве с данными
  // Для каждого будет нарисован отдельный столбец
  for (const item of items) {
    // Вычисляем высоту столбца с учётом процентов из данных
    const barHeight = (item.value * BarSize.MAX_HEIGHT) / MAX_PERCENTAGE;

    // Задаём цвет заливки любых элементов, которые будут создаваться дальше
    ctx.fillStyle = item.color;
    // Задаём параметры шрифта
    ctx.font = `${Font.SIZE} ${Font.FAMILY}`;
    // Запоминаем текущие параметры холста
    ctx.save();
    // Сдвигаем начало коодинат вниз по оси y на величину canvas.height
    ctx.translate(0, canvas.height);
    // Поворачиваем систему координат на 90 градусов против часовой стрелки
    // Math.PI/2 — перевод 90 градусов в радианы
    ctx.rotate(-Math.PI/2);
    // В изменённой системе координат рисуем текст снизу вверх
    ctx.fillText(item.name.toUpperCase(), LabelCoordinate.INITIAL_X, currentLabelY);
    // Возвращаемся к изначальной системе координат
    ctx.restore();
    // Рисуем столбец
    // Отрицательное значение — отрисовка снизу вверх
    ctx.fillRect(currentBarX, BarCoordinate.INITIAL_Y, BarSize.WIDTH, -barHeight);

    // Для следующего столбца обновляем координаты с учётом отступа
    currentBarX += gapBetweenBars;
    currentLabelY += gapBetweenBars;
  }
};

Вы заметили, что в самом начале мы очистили весь холст? Если этого не сделать, изображения будут накладываться друг на друга. В данном случае такой вариант не подходит, потому что мы хотим, чтобы при каждом клике на кнопку «Показать график» происходила перерисовка с учётом новых данных. Именно эту функциональность нам осталось запрограммировать.

Шаг 5. Реализуем отрисовку графика при отправке формы

У нас уже есть функция getData(), которая возвращает данные, и renderChart(), способная отрисовать график. Осталось только связать их вместе при клике на кнопку «Показать график».

Все поля ввода мы изначально сгруппировали в форму, поэтому будем отслеживать событие submit, которое произойдёт при отправке. А когда событие сработает, отрисуем график с учётом введённых данных.

const formElement = document.querySelector(`.chart__data`);

formElement.addEventListener(`submit`, (evt) => {
  // Отменяем действие по умолчанию — отправку формы на сервер (которого нет)
  evt.preventDefault();

  // Отрисовываем график
  renderChart(getData(inputElements));
  // Сбрасываем значения полей ввода
  formElement.reset();
});

Готово! Мы создали простой график на Canvas. Его можно доработать, например, добавив проверку на сумму введённых значений, которая по логике должна быть равна 100%, сейчас это правило можно нарушить. Поэкспериментировать с этим и другими улучшениями можно в нашей интерактивной демонстрации.

Полезности


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

9 книг по JavaScript для начинающих в 2024

9 книг по JavaScript для начинающих в 2024

Все вокруг говорят, что книги — прошлый век. Но вовремя прочитанная хорошая книжка может здорово помочь в изучении нового языка или технологии, а то и вообще целиком объяснить какую-нибудь важную штуку. Например, какие бывают алгоритмы, или зачем нужен рефакторинг. К тому же, хоть фреймворки меняются каждый год, основы обычно долго не меняются.

Мы опросили знакомых разработчиков, узнали, что читают они сами, и предлагаем вам подборку хороших книг по JavaScript.

Читать дальше
JS
  • 6 марта 2024
Объект URL в JavaScript: полный разбор

Объект URL в JavaScript: полный разбор

Объект URL в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.

Создать объект URL можно двумя способами:

Конструктор URL() — самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.

const url = new URL("https://www.example.com/path?query=123#hash");

Использование window.location — это глобальный объект в браузерах, который содержит информацию о текущем URL.

const currentUrl = new URL(window.location.href);
Читать дальше
JS
  • 23 января 2024
Знакомство с JavaScript

Знакомство с JavaScript

Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.

Вы можете добавить JavaScript в ваш HTML-документ двумя способами:

Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>:

<script>
  alert("Привет, мир!");
</script>

Внешний JavaScript: подключение внешнего .js файла к HTML-документу:

<script src="script.js"></script>
Читать дальше
JS
  • 1 ноября 2023
Событие onclick в JS на примерах

Событие onclick в JS на примерах

Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick. В этой статье мы подробно разберёмся, что такое событие onclick, как его использовать и приведем примеры применения.

Событие onclick — это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.

Читать дальше
JS
  • 30 октября 2023
Как перевернуть сайт. Самая короткая инструкция

Как перевернуть сайт. Самая короткая инструкция

Не представляем, зачем это может понадобиться, но не могли пройти мимо.

Никакой магии. Мы вызываем JavaScript-функцию rotateBody(), которая применяет свойство transform с значением rotate(180deg) к элементу <body>. Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри <body> будет повернуто на 180 градусов (то есть, встанет вниз головой)

function rotateBody() {
  document.body.style.transform = 'rotate(180deg)';
}

<button onclick="rotateBody()">Перевернуть</button>

Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:

let isRotated = false;

function rotateBody() {
  if (isRotated) {
    document.body.style.transform = 'rotate(0deg)';
    document.body.style.direction = "ltr";
  } else {
    document.body.style.transform = 'rotate(180deg)';
    document.body.style.direction = "rtl";
  }
  isRotated = !isRotated;
}

Надеемся, вы прочитали это описание до того, как нажать на кнопку.

JS
  • 25 октября 2023
Как узнать геолокацию: Geolocation API

Как узнать геолокацию: Geolocation API

Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.

Основной метод Geolocation API — getCurrentPosition(), но есть и другие методы и свойства, которые могут пригодиться.

Читать дальше
JS
  • 16 октября 2023
Что такое localStorage и как им пользоваться

Что такое localStorage и как им пользоваться

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

До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.

Читать дальше
JS
  • 12 октября 2023