Canvas js примеры: 10 крутых примеров работы HTML5 Canvas

Попробуйте сами, отредактировав приведенный ниже код.

Готовы создать свою первую диаграмму локально в вашей системе с помощью CanvasJS?

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

1. Скопируйте приведенный выше шаблон кода и сохраните его локально как файл HTML.
2. Запустите сохраненный файл HTML.
   Вы увидите приведенную выше диаграмму, работающую на вашем компьютере.
3. Теперь измените параметр типа на «бублик».
4. Сохраните изменения и запустите снова.
   Вуаля! Вы только что создали кольцевую диаграмму.
5. Теперь попробуйте изменить тип на различные другие типы диаграмм, такие как «splineArea», «bar» и т. д., и позвольте CanvasJS творить чудеса.

Так просто, правда?!
Следующий шаг: Ознакомьтесь с приведенным ниже руководством, чтобы начать легко создавать невероятно высокопроизводительные диаграммы с помощью CanvasJS. Он научит вас основам создания диаграмм HTML5 Javascript с помощью интерактивных примеров.

Мы рекомендуем вам отредактировать код, как описано в комментариях, и ознакомиться с API

Базовая столбчатая диаграмма

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

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

1. Создайте новый объект Chart , отправив идентификатор элемента div, в котором должна быть отображена диаграмма.
   Вы также можете передать элемент DOM вместо ID
2. Передать все связанные с диаграммой «параметры» конструктору в качестве второго параметра.
3. Вызов chart.render() 9Метод 0017 для отображения диаграммы

Таблица «Опции» в основном содержит 4 важных пункта.

1. заголовок объект с его текстом набор свойств.
2. dataPoints — это массив всех элементов данных, подлежащих визуализации
3. dataSeries — родитель dataPoints, который также определяет тип диаграммы и другие параметры ряда
4. data – элемент массива, представляющий собой набор из одного или нескольких объектов dataSeries. Здесь у нас есть только один dataSeries.

Ознакомьтесь с приведенным ниже кодом — поэкспериментируйте и ознакомьтесь с API.

Примечание

Хотя мы собираемся использовать гистограммы для изучения различных концепций, их легко превратить в любую диаграмму по вашему желанию! Просто измените свойство type DataSeries на любой тип диаграммы, который вам нужен — столбчатая, площадная, линейная, точечная, stackedColum и т. д.

Извлечь (позже) все поддерживаемые типы диаграмм

Попробуйте сами, отредактировав приведенный ниже код.

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

Попробуйте сами, отредактировав приведенный ниже код.

Альтернативный способ установки/обновления данных

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

Доступ к объекту Options, который вы передаете конструктору в приведенном выше методе, можно получить через свойство options диаграммы. Используя тот же объект, вы можете установить или обновить различные свойства диаграммы, как показано ниже.

chart.options.title.text = "Заголовок диаграммы";
chart.options.data = [массив];
chart.options.data[0] = {объект};
chart.options.data[0].dataPoints = [массив];
 

Попробуйте сами, отредактировав приведенный ниже код.

Примечание

• Вы должны не забыть вызвать chart.render() после настройки/обновления параметров — попробуйте выполнить пакетное обновление всех обновлений перед вызовом chart.render()
• Мы закончили с производительностью! Таким образом, вы даже можете обновлять диаграмму каждые 100 миллисекунд (или реже, если хотите!!) — хотя такая частота обновления в большинстве случаев не требуется

Дополнительная настройка

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

Персонализация	Объект	Свойство
Установить размер заголовка диаграммы	название	fontSize — 12,13,14 и т. д.
Установить цвет заголовка диаграммы	название	fontColor — красный, синий, зеленый и т. д.
Показать линию оси Y	ось Y	lineThickness — 0, 1, 2 и т. д.
Показать значение (indexLabels) поверх столбца/полосы	серия данных	indexLabel — «{y}», «${y}K», «любой текст»
Установить угол метки оси X	осиX	labelAngle – 30, 45, 90 и т. д.

17 Экспериментальные примеры использования HTML5 Canvas

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

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

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

Этот прекрасный пример преобразует геометрические уравнения в 3D-модели.

Эта демонстрация демонстрирует возможности WebGL JavaScript API и элемента canvas; он накладывает 3D-объекты поверх видео. Возможно, именно так можно реализовать дополненную реальность на веб-страницах с помощью открытого исходного кода.

Фотографии с картой нормалей

Этот эксперимент демонстрирует интересные интерактивные световые эффекты, применяемые к изображениям.

Этот эксперимент имеет различные настройки, такие как текст, который вы хотите анимировать; это отличный пример, показывающий, как программно анимировать HTML на элементе холста.

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

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

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

Эта интересная демонстрация превращает систему метро Нью-Йорка (называемую MTA) в музыкальный струнный инструмент.

Он получает данные в режиме реального времени с помощью общедоступного API MTA, а затем использует JavaScript, SVG, нарисованный на холсте HTML5, и аудиоэлемент HTML5 для звуков. Подробнее о проекте «Дирижер» здесь.

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

В этой демонстрации демонстрируется техника компьютерной графики с трассировкой лучей, полностью реализованная с использованием JavaScript и HTML5. Узнайте больше об этой демонстрации здесь.

Моделирование ткани

В этом интерактивном эксперименте используется элемент холста HTML5 для отображения моделирования физики движения материала ткани. Приложением для этой демонстрации может быть 3D-анимация.

Mesmerizer

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