Webページ上にLEGO®のようなブロックでさまざまな形を作成できる超軽量JavaScriptライブラリ -LegraJS
Post on:2019年11月25日
sponsors
Webページ上にLEGO®のようなブロックでさまざまな形を作成できる、3.4Kbの超軽量JavaScriptライブラリを紹介します。
矩形や枠線をはじめ、ラインや楕円やベジェ曲線やグラフやアートなどもブロックで簡単に作成できます。
LegraJSの特徴
LegraJSは、Lego® brick GraphicsのLeとGraを繋げた造語で、HTMLの<canvas>要素を使用してWebページにLEGO®のようなブロックのさまざまな形を簡単に描画できるJavaScriptライブラリです。
3.4Kbの超軽量で、他のJavaScriptへの依存はありません。
MITライセンスで利用できます。
描ける形は、ライン、矩形、多角形、楕円、ベジェ曲線などに対応しており、すべての図形をブロック化します。ブロックのサイズやカラーは自由に定義できます。
LegraJSのデモ
デモではシンプルな形だけではなく、円グラフやアートなど複雑な形をブロックで描いています。
下部のスライダーで、ブロックのサイズを変更できます。
LegraJSの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
npmでインストールもできます。
Step 2: HTML
<canvas>でブロックを配置する場所を確保します。
Step 3: JavaScript
スクリプトを初期化し、描画する形を定義します。
ブロックでラインを描く場合は、下記のように記述します。
ドキュメントには、さまざまな形の作り方が掲載されています。
LegraJS: 使い方
LegraJS: 使い方
LegraJS: 使い方
sponsors
