Pull to refresh

CanvGauge — измерительный прибор с помощью canvas для HTML5

JavaScript *
HTML5 Canvas GaugeДобрый день, хабровчане!

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

Почему именно canvas?



Во-первых, это работает во всех современных браузерах. Во-вторых — это таки работает на мобильных платформах Android и iOS без ограничений. Тот же SVG, к примеру не работает по-умолчанию на Android 2.x, а Flash не работает в iOS.

Код CanvGauge можно забрать здесь. Там же можно найти небольшое описание API. А здесь посмотреть пример работы.

При использовании вам не нужны никакие сторонние библиотеки. Код распространяется по лицензии MIT, можете спокойно забирать, модифицировать, улучшать/ухудшать, делиться своими дополнениями и наработками. С радостью приму хорошие коммиты в свой репозиторий. Буду признателен за найденные баги и интересные предложения. К сожалению, я не художник, поэтому внешний вид, возможно, не идеален. Если кто-то может помочь с наведением «красоты» — welcome!

Особенности «из коробки»



Gauge относительно легко кастомизируется. Можно задавать параметрически цвета элементов прибора, его размер, шкалы градаций, заголовок и единицы измерения. Доступны различные функции анимации стрелки, а также есть возможность внедрять свою функцию анимации «на лету».
Tags:
Hubs:
Total votes 78: ↑72 and ↓6 +66
Views 4.7K
Comments Comments 67