[JS]さまざまなデータを最小限の記述でビジュアル化する高性能なJavaScriptライブラリ -Zeu.js
Post on:2018年9月13日
sponsors
さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。
メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。
上記は静止画ですが、もちろんアニメーションで動きます。
デモのカラーは派手ですが、オプションで簡単に変更できます。
Zeu.jsはCanavasベースで、外部ファイルと空のcanvas要素を用意し、あとはタイプとデータを定義するだけで実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- 外部ファイル --> <script src="zeu.min.js"></script> <!-- 空のcanvas要素 --> <canvas id="text-meter" width="200" height="100"></canvas> <script> // タイプを定義 var textMeter = new zeu.TextMeter('text-meter'); // データを定義 textMeter.displayValue = 'ZEU'; textMeter.value = 50; </script> |
ビジュアルはさまざまなタイプが用意されています。
sponsors
