Webページ上にLEGO®のようなブロックでさまざまな形を作成できる超軽量JavaScriptライブラリ -LegraJS

Webページ上にLEGO®のようなブロックでさまざまな形を作成できる、3.4Kbの超軽量JavaScriptライブラリを紹介します。

矩形や枠線をはじめ、ラインや楕円やベジェ曲線やグラフやアートなどもブロックで簡単に作成できます。

サイトのキャプチャ

LegraJS
LegraJS -GitHub

LegraJSの特徴

LegraJSは、Lego® brick GraphicsのLeとGraを繋げた造語で、HTMLの<canvas>要素を使用してWebページにLEGO®のようなブロックのさまざまな形を簡単に描画できるJavaScriptライブラリです。

3.4Kbの超軽量で、他のJavaScriptへの依存はありません。
MITライセンスで利用できます。

サイトのキャプチャ

LegraJS

描ける形は、ライン、矩形、多角形、楕円、ベジェ曲線などに対応しており、すべての図形をブロック化します。ブロックのサイズやカラーは自由に定義できます。

LegraJSのデモ

デモではシンプルな形だけではなく、円グラフやアートなど複雑な形をブロックで描いています。

デモのキャプチャ

LegraJSのデモ: パイチャート

デモのキャプチャ

LegraJSのデモ: モナリザ

下部のスライダーで、ブロックのサイズを変更できます。

LegraJSの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

npmでインストールもできます。

Step 2: HTML

<canvas>でブロックを配置する場所を確保します。

Step 3: JavaScript

スクリプトを初期化し、描画する形を定義します。
ブロックでラインを描く場合は、下記のように記述します。

ドキュメントには、さまざまな形の作り方が掲載されています。

サイトのキャプチャ

LegraJS: 使い方

サイトのキャプチャ

LegraJS: 使い方

サイトのキャプチャ

LegraJS: 使い方

sponsors

top of page

©2020 coliss