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: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script src="https://unpkg.com/legra?browser"></script> |
npmでインストールもできます。
|
1 |
npm install --save legra |
Step 2: HTML
<canvas>でブロックを配置する場所を確保します。
|
1 |
<canvas width="600" height="600"></canvas> |
Step 3: JavaScript
スクリプトを初期化し、描画する形を定義します。
ブロックでラインを描く場合は、下記のように記述します。
|
1 2 3 4 |
// line(x1, y1, x2, y2 [, options]) legra.line(3, 1, 10, 1); legra.line(11, 11, 1, 1, { color: 'red' }); |
ドキュメントには、さまざまな形の作り方が掲載されています。
LegraJS: 使い方
LegraJS: 使い方
LegraJS: 使い方
sponsors
