Работа с объектом Canvas в 2D

Работа с объектом Canvas в 2D

Canvas — это HTML-элемент, использующийся для рисования графики средствами языков программирования. Он может, к примеру, использоваться для рисования графов, создания коллажей или анимации.

Нарисуем при помощи canvas гистограмму среднемесячной температуры за год.

Canvas позволяет оперировать основными фигирами, линиями, картинками, добавлять текст.

Подготовительный этап

Создадим проект который на данный момент состоит из 3 файлов: index.html, style.css, index.js

Обратите внимание, что index.js и style.css находятся в папке assets

Напишем стандартную заготовку для HTML-документа

В теле страницы опишем тег canvas. Он будет иметь идентификатор canvas, и сразу в теге обозначим атрибуты width и height со значениями 800;

Для того, чтобы обозначить границы холста, добавим стили

Присоединим файл style.css к странице в шапке страницы используя тег link.

Файл скрипта добавляем в конце тела страницы для того, чтобы к моменту програзки скрипта прогрузился весь HTML-документ.

Разбор предметной области

Наша предметная область - это метеоданные, а точней температура воздуха;

Для построение гистрограммы будем учитывать температуру в Цельсиях и месяца.

При построении графиков мы имеем стакими понятиями как:

Ось ординат. Она же ось "y";

Ось абцисс. Она же ось "x";

Начало координат. Точка отчета;

Единичный отрезок - величина принятая за единицу;

Маcштаб - отношение двух линейных размеров;

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

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

Масштаб, отступ и начало координат при вычислении переводятся в пиксели.

Коэффициент 4 позволяет выровнять ось ординат с началом координат. Наш график может показывать температуру от -40 до 40, всего 8 единичных отрезков, если единичный отрезок по оси равняется 10, следовательно середина оси ординат 8/2 = 4.

Точка отчета на холсте это правый верхний угол, поэтому чтобы вычислить начало координат необходимо маcштаб умножить на 4 и прибавить отступ в пикселях между единичными отрезками.

Настало время рисовать. Захватываем холст при помощи getElementById. После захвата получаем контекст для 2d и записываем в константу ctx.

Документация для CanvasRenderingContext2D

Запустив в браузере страницу с текущим кодом, в консоли написав ctx и нажав Enter, можно ознакомиться с доступными свойствами и методами объекта CanvasRenderingContext2D

Отрисовка координатной плоскости

Данный код позволяет нарисовать оси абцисс и ординат, проставить единичные отрезки

Свойство fillStyle задает цвет или стиль при заливке фигур. Значением может быть цвет, градиент либо паттерн (см. документацию). lineWidth задается в пикселях.

В методах moveTo(), lineTo() все значения задаются в пикселях, первый параметр положение по оси x, второй - по оси y.

В цикле откладываем единичные отрезки по оси ординат. Самостоятельно сделайте анализ происходящего в данном цикле.

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

В цикле отрисовки гистограммы мы перебираем массив, в котором содержится данные о температуре. При помощи свойства length подсчитываем количество элементов в массиве. Значение элемента массива получаем обращаясь к массиву по интексу data[i].

Формулы по расчету координат изучите самостоятельно. Поэкспериментируйте с изменением маштаба и других параметров.

Осталость немного - подписать ось абцисс.

Скорректируйте это цикл for так, чтобы количество элементов в массиве посчитывалось само.

С принимаемыми параметры на метод fillText() также можно ознакомиться в докуметации.