Рисуем диаграмму в Canvas

Содержание:

Программисты работают с изображениями, и часто возникает необходимость вставки каких-то статистических или графических данных.

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

Используйте информацию, и вы сможете нарисовать хорошую диаграмму.

Что такое Canvas

Он представляет собой HTML-элемент. В коде пишется следующим образом: <canvas>. По сути, это растровый холст, на котором можно быстро рисовать с помощью скриптов (часто используется JavaScript).

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

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

Одна из главных фишек элемента – это:

  • рисование графиков;
  • рисование диаграмм;
  • отображение схем.

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

Еще один плюс Canvas – это интерактивность и возможность реагировать на действия JavaScript.

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

Элемент Canvas часто применяют для написания интернет-приложений. Методы для анимации графических объектов идеально подходят для создания приложений. Элемент позволяет все делать экономно и без затраты больших ресурсов.

Примитивы в Canvas

<canvas> позволяет рисовать множество графических элементов:

  • прямоугольные фигуры;
  • линии;
  • окружности;
  • дуги;
  • разные типы кривых;
  • эллипсы;
  • разные контуры;
  • арки;
  • делать добавление изображений.

Кроме всего этого, элемент <canvas> позволяет делать разные эффекты, такие как:

  • уровень прозрачности;
  • эффект смешивания;
  • градиенты;
  • уровни тени;
  • заливки;
  • контуры.

Особенности Canvas

Из особенностей элемента Canvas можно выделить следующее:

  1. Размер холста. К нему нужно относиться внимательно. Если поменять значения ширины и высоты, то проект с готовой работой сбросится. Поэтому изменениями значений нужно заниматься до создания какого-то проекта.
  2. Стартовая точка находится не в центре, а в верхнем углу слева. Потом точку можно сдвинуть в центр.
  3. Элемент Canvas не поддерживает 3D, но это исправляется с помощью библиотек. Установив такую библиотеку, можно заниматься отрисовкой как 2D-, так и 3D-изображений, что увеличивает возможности для создания более интересных предложений.
  4. Кодировки цвета и размера шрифта такие же, как и в CSS.

Преимущества и недостатки

Рассмотрим подробно эти моменты. Выделены только основные моменты, которые связаны с функционалом Canvas.

Преимущества

Из преимуществ можно выделить следующее:

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

Недостатки

Выделим только действительно весомые, среди которых:

  • большое потребление ОЗУ и ресурсов процессора. Это происходит из-за того, что элемент лишен функции очистки памяти;
  • обязательная прорисовка элементов вручную и по отдельности;
  • в элемент могут внедряться специальные маркеры-маячки, которые следят за активностью программиста в сети;
  • если использовать высокие разрешения растровых форматов, то будет низкая производительность.

Дальше уже делайте выводы сами, подходит ли вам этот элемент. Больших преград в разработке графики не имеется, тем более что проблема 3D-отрисовки решается с помощью специальных библиотек.

Как нарисовать диаграмму с помощью Canvas

Разберемся, как сделать график. Задача несложная, но нужно немного поработать с кодом.

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

Для начала прописываем HTML-часть.

HTML

Здесь достаточно простая задача. Необходимо просто создать элемент <canvas>, выставить его размер и поставить его id.

Рисуем диаграмму в Canvas

На этом использование HTML-части закончено. Далее переходим к каскадной таблице стилей (CSS).

CSS

Здесь делаем рамку для разграничения страницы и график.

Рисуем диаграмму в Canvas

После написания кода получаем такой результат:

Рисуем диаграмму в Canvas

То есть получаем такой вот квадрат.

JavaScript

Здесь уже немного сложнее, чем в предыдущих случаях, но выполнимо. Для начала нам нужно получить canvas-элемент, делается это с целью возможности рисования 2D-рисунков.

Рисуем диаграмму в Canvas

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

Далее начинаем рисовать линии и метки.

Рисуем диаграмму в Canvas

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

Рисуем диаграмму в Canvas

В коде указали метки по высоте допустимых значений. А по ширине в качестве меток указаны 5 месяцев. Получаем такой результат:

Рисуем диаграмму в Canvas

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

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

Рисуем диаграмму в Canvas

Получаем такой результат:

Рисуем диаграмму в Canvas

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

Вопросы – Ответы

Ответим на самые популярные вопросы.

Можно ли добавить видео в Canvas?

Да. Функционал позволяет делать подобное добавление, при этом не будет большой нагрузки на ОЗУ.

Можно ли преобразовывать png в pdf-файл с помощью элемента Canvas?

Да. Это можно делать с холста, на котором нарисовано изображение png.

Элемент Canvas подходит только для отрисовки изображений под web-приложения?

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

Заключение

Подведем итог. Мы разобрались с тем, что такое Canvas и для чего он используется в web-программировании.

Рассмотрим еще раз, что мы прошли в статье:

  • узнали в целом, что такое Canvas;
  • узнали о примитивах в Canvas;
  • разобрали преимущества элемента;
  • разобрали недостатки элемента;
  • научились рисовать диаграмму с помощью Canvas;
  • ответили на популярные вопросы.

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

Вы станете специалистом в программировании и научитесь писать код любой сложности.

Занятия будут вести преподаватели, которые имеют большой опыт работы в крупных компаниях. Они научат вас не только академическому программированию, но и поделятся различными фишками, которые помогут затрачивать меньше времени на написание программ.

По окончании обучения вы получите сертификат о прохождении курса. В фирмах он котируется как диплом.

Поторопитесь, количество мест на обучение ограничено.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!