Среди множества лучших вещей в спецификации HTML 5 - Canvas, который представляет собой способ программного рисования с использованием JavaScript. Элемент HTML5 Canvas позволяет свободно рисовать графику внутри границ элемента Canvas на странице HTML5. Элемент холста HTML5 сам по себе является элементом HTML, но API, который вы используете для работы с ним, представляет собой API JavaScript.

Canvas можно использовать для визуального представления чего-либо в вашем браузере.

Например:

  • Простые схемы
  • Необычные пользовательские интерфейсы
  • Анимации
  • Диаграммы и графики
  • Встроенные приложения для рисования
  • Работа с ограничениями CSS

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

Что можно делать с помощью Canvas:

Рисунок

  • Прямоугольники
  • Дуги
  • Пути и рисование линий
  • Безье и квадратичные кривые

Эффекты

  • Заливки и штрихи
  • Тени
  • Линейные и радиальные градиенты
  • Альфа-прозрачность
  • Композитинг

Преобразования

  • Масштабирование
  • Вращение
  • Перевод
  • Матрица трансформации

Получение и отправка данных

  • Загрузка внешних изображений по URL-адресу, другим холстам или URI данных
  • Получение PNG-представления текущего холста как URI данных

Начиная

Чтобы использовать Canvas, вам понадобятся две вещи

  • Тег Canvas в HTML для размещения холста для рисования.
  • JavaScript для рисования

Тег Canvas - это, по сути, тег IMG без каких-либо данных. Вы указываете ширину и высоту области рисования. Вместо атрибута alt вы можете заключить HTML в тег холста для альтернативного содержимого.

Пример тега Canvas:

‹Холст id =” canvasTable ”width =” 1800px ”height =” 700px ”style =” position: absolute; верх: 0px; слева: 0px; z-индекс: 2; ширина: 1428 пикселей; высота: 761 пикселей; padding-top: 0 пикселей; padding-left: 0px; ”› Ваш браузер не поддерживает Canvas. ‹/canvas›

С элементом Canvas в HTML мы добавим JavaScript. Нам нужно сослаться на элемент Canvas, проверить, совместим ли браузер с Canvas, и создать контекст рисования:

// Получение ссылки на элемент холста.

var canvas = document.getElementById («canvasTable»);

// Получение 2D-контекста из элемента холста.

var context = canvas.getContext («2d»);

Проверка метода getContext () на объекте DOM холста является стандартным способом определения совместимости холста.

Переменная контекста теперь ссылается на контекст Canvas, и ее можно рисовать.

Таблица для рисования на холсте

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

Если мы подумаем о таблице как о наборе строк, мы получим:

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

Начнем с определения ширины и высоты границы,

// Логика определения ширины и высоты границы

let bw = (Object.keys (this.data [0]). length) * 200; // Расчет ширины границы

пусть bh = (this.data.length + 1) * 40; // Расчет высоты границы

var p = 10; //прибыль

В приведенной выше логике на основе переданных данных CSV я сначала проанализировал эти данные в формате JSON. после этого вычислите количество ключей в одном объекте и умножьте его на 200 (может быть любое значение по вашему выбору), чтобы найти ширину границы. аналогичным образом вычислили длину объекта массивов, добавили еще 1 строку в качестве заголовка и умножили ее на 40 (может быть любое значение по вашему выбору), чтобы найти высоту границы. и присвоили переменную P = 10 (в качестве запаса).

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

// Чтобы очистить холст перед рисованием или перерисовкой таблицы

context.clearRect (0, 0, canvas.width, canvas.height);

// Рисуем контур строк на таблице…

for (var x = 0; x ‹= bw; x + = 200) {

context.moveTo (0,5 + x + p, p);

context.lineTo (0,5 + x + p, bh + p);

}

// Рисуем контур столбца на таблице…

for (var x = 0; x ‹= bh; x + = 40) {

context.moveTo (p, 0,5 + x + p);

context.lineTo (bw + p, 0,5 + x + p);

}

// Установка свойств границ в нарисованной таблице

context.strokeStyle = «черный»;

context.stroke ();

let keys = Object.keys (this.data [0]); // находим ключи в каждом объекте JSON

// Чтобы распечатать значения в таблице, исключая заголовок

// let count используется для отслеживания количества заполняемых строк.

// пусть keyCount используется для отслеживания количества заполняемых столбцов.

for (пусть y = 80, count = 0; y ‹= bh; y + = 40) {

for (пусть x = 0, keyCount = 0; x ‹bw; x + = 200) {

context.font = «нормальный 16px Вердана»;

context.fillStyle = «черный»;

context.fillText ((this.data [count]) [keys [keyCount]], 0,5 + x + p + 5, y);

++ keyCount;

}

++ count;

}

// Чтобы напечатать заголовок…

for (пусть x = 0, keyCount = 0; x ‹bw; x + = 200) {

context.font = «жирный 16px Verdana»;

context.fillStyle = «черный»;

context.fillText (ключи [keyCount], 0,5 + x + p + 5, p + 25);

++ keyCount;

}

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

context.clearRect (11, bh + 11, canvas.width, canvas.height)

context.clearRect (bw + 11, 9.5, canvas.width, canvas.height)

context.save (); // для сохранения контекста в стек

Как видите, в приведенном выше коде я очистил холст перед рисованием таблицы. так что он не будет конфликтовать с ранее нарисованным холстом. Чтобы рисовать контуры строк и столбцов, я использовал API context.moveTo () и context.lineTo ().

= ›Перемещение виртуального указателя осуществляется с помощью функции 2D-контекста moveTo(x, y), например:

context.moveTo(10,10);

= ›Функция lineTo() рисует линию от местоположения виртуального указателя до точки, переданной в качестве параметра функции lineTo().

Вот пример:

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

А чтобы добавить свойства к строке, я использовал Context.strokeStyle и context.stroke ().

На самом деле ничего из пути не будет нарисовано, пока вы не дадите команду 2D-контексту нарисовать путь. Это делается путем вызова stroke() или fill() в 2D-контексте.

= ›stroke() функция будет рисовать контур фигуры, определенной операциями с контурами.

= ›Стиль обводки добавит стили в контекст.

До этого момента мы нарисовали контуры нашей таблицы. Теперь нам нужно заполнить нашу таблицу данными, которые мы предоставили в виде CSV.

В приведенном выше коде я использовал две переменные для отслеживания строк и столбцов, то есть count и keyCount. И использовал три API: context.font (), context.fillStyle, context.fillText ().

= ›При рисовании текста на холсте HTML5 вы должны указать, какой шрифт использовать. Это делается путем установки значения свойства 2D Context font. Это свойство представляет собой строку со значениями, совместимыми с CSS, в формате:

[font style][font weight][font size][font face]

Например:

context.font = "normal normal 20px Verdana";

= ›При рисовании текста на холсте HTML5 вы можете рисовать текст с заливкой или контуром, как показано ранее. Это можно сделать с помощью функций 2D-контекста fillText() и strokeText(). Эти функции определены следующим образом:

fillText   (textString, x, y [,maxWidth]);
strokeText (textString, x, y [,maxWidth]);

textString параметр - это текст для рисования.

x и y обозначают место, где рисуется текст. Параметр x - это место, где начинается текст. Параметр y указывает расположение текста по вертикали, но его представление зависит от базовой линии текста. Базовая линия текста рассматривается в следующем разделе.

Текст maxWidth рассматривается в разделе ниже.

Вот пример кода:

context.font      = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);

В конце концов, я использовал API Context.save () для сохранения состояния холста.

= ›При рисовании на холсте HTML5 с использованием его 2D-контекста 2D-контекст находится в определенном состоянии. Вы устанавливаете это состояние, манипулируя свойствами 2D-контекста, например, fillStyle и strokeStyle. Все эти манипуляции в совокупности называются 2D-контекстом state. Поскольку настройка полного состояния перед рисованием каждой формы может быть довольно громоздкой, вы можете помещать состояния в стек состояний. Затем из этого стека состояний могут быть извлечены более ранние состояния. Это быстрый способ вернуться к более раннему состоянию после временного изменения состояния.

вы можете нажимать и извлекать состояние 2D-контекста, используя следующие методы:

context.save();// state pushed onto stack.
context.restore();// state popped from stack, and set on 2D Context.

Приведенный выше код даст вам результат примерно так:

Ссылки и ресурсы

  1. Учебники по холсту на jenkov.com.

Содействие

Хотели бы улучшить технику или код? Не стесняйтесь обращаться



sanjaymahto / CanvasTablePivoting
Участвуйте в разработке CanvasTablePivoting, создав учетную запись на GitHub. github.com



Спасибо за прочтение. Если вам понравилась статья, нажмите 💚 ниже, чтобы другие люди увидели ее на Medium.