A very short introduction to HTML5’s canvas tag element: Graphing mathematical functions in JavaScript

The canvas tag in JavaScript gives the programmer low-level graphics control. If you wanted to write an in-browser game with 2D graphics, it’s the right element to use. Firefox, Safari and Chrome support the tag natively, and Internet Explorer supports canvas with a translation layer. This article serves as a very short introduction to the canvas tag by describing the code necessary to create a system for rendering graphs of univariate mathematical functions (like y(x) = sin(x) + C and f(x) = x 2 + 2).

More resources

Why?

I’ve wanted to play with the canvas tag for a while now, and I finally have the perfect confluence of excuses to do so: I want to build an HTML-based rendering system for the output of my static analyzers; I’m introducing three engineering scholars to programming languages with graphics in JavaScript; and I’m building a super-optimizing compilation engine for dynamic languages like Scheme and JavaScript. Building a system for rendering univariate functions seems like a fun way to tip-toe into the canvas tag; below, you’ll find an explanation of the system with a working demo.

Setting up the canvas

Setting up a canvas is straightforward; just drop in a canvas tag:

 CANVAS NOT SUPPORTED IN THIS BROWSER! 

The body of the canvas tag is what will be shown if the browser does not support the canvas tag.

Accessing the canvas

To draw on the canvas, grab ahold of the element itself:

var Canvas = document.getElementById('xy-graph');

And then grab its context:

To draw on the canvas, call methods on the Ctx object.

Preparing the canvas

To prepare the canvas for drawing, it’s best to clear what’s already on the canvas with the clearRect(startX,startY,finishX,finishY) method:

Ctx.clearRect(0,0,Canvas.width,Canvas.height) ;

Drawing lines

• Ctx.beginPath() starts recording a new sequence of line segments.
• Ctx.moveTo(x,y) moves the pen to the coordinates (x,y) .
• Ctx.lineTo(x,y) drags the pen to the coordinates (x,y) .
• Ctx.stroke() connects all of the points in the path described.

Demo application: Graphing a function

Type JavaScript code in below that defines a function named F , and the click Draw! button further down. The full, well-commented source code to this app is about 200 lines, and it’s available down below.

CANVAS NOT SUPPORTED IN THIS BROWSER!

Источник

Как сделать график на Canvas

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

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

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

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

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

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

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

 
Популярность языков программирования
  
JavaScript % 
  
 Браузер не поддерживает Canvas 
 
 

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

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

Стилизация элементов будет максимально простой, поэтому не будем её разбирать в рамках туториала. Стили можно посмотреть в файле 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, а также манипулировать им. Для получения объекта контекста нужно воспользоваться методом 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 = `$$`; // Запоминаем текущие параметры холста 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%, сейчас это правило можно нарушить. Поэкспериментировать с этим и другими улучшениями можно в нашей интерактивной демонстрации.

Полезности

• Canvas tutorial на MDN.
• HTML5 Canvas cheat sheet. Шпаргалка с основными свойствами и методами 2d контекста, разбитыми на категории.
• The HTML5 Canvas Handbook. Справочник по Canvas с примерами.
• 10 крутых примеров работы HTML5 Canvas. Не самые практичные, но иногда это и не главное.

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

Источник

График на JavaScript и canvas

В этой статье вы прочитает о том, как сделать график диаграмму на чистом JavaScript и canvas, но должен сказать, что код по сути был скопирован с сайта Web Reference .

JS рисование графиков:

Суть работы программы, что она будет создавать столбы диаграммы, их высота будет равна, единице размера умноженное на их значение, но сначала надо сделать HTML.

HTML:

В HTML нам надо только создать элемент и задать ему размер, айдишник.

На этом с HTML мы закончили.

CSS:

В CSS просто сделаем рамку, что бы разграничить страницу и график.

JavaScript:

Тут уже всё сложнее, но всё равно будет достаточно легко, сначала получим «canvas» элемент и сделаем так, что бы на нём рисовать 2D рисунки.

С помощью document.getElementById(‘canvas’) получаем элемент, а благодаря canvas.getContext(‘2d’) настраиваем на то, что бы рисовать 2D объекты.

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

Здесь мы сделали линии, теперь надо добавить текст и цифры что бы понимать js графики и диаграммы.

Тут мы сделали по высоте метки допустимых значениях а по ширине в качестве меток пять месяцев, вот результат.

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

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

Источник