Web上で2Dのオブジェクトを描くとなると、途端に敷居が上がります。CanvasやSVGを使うことで2Dオブジェクトは描けますが、星の形を描くのすら苦戦するでしょう。さらにそれをJavaScriptと連携させるとなると大変です。 そこで使いたいのが専用のライブラリです。今回はPencil.jsというCanvas向けに出力するライブラリを紹介します。

Pencil.jsの使い方

ドロー例。オプションを変更することでインタラクティブに図形を変更できます。

幾何学模様だけでなく、こんなイラスト的な図形も描けます。

数字をカウントダウンさせたり、アニメーションさせることも。

こちらも夕日がアニメーションします。

コードと描かれるオブジェクトの比較。関数を組み合わせることで図形を自由に描けます。

Pencil.jsはCanvasベースですが、マウスオーバーやドラッグなどと組み合わせて使えます。インタラクティブなオブジェクト描画が可能です。Canvasを生で操作するよりもずっと簡単に扱えるでしょう。

Pencil.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Pencil.js pencil-js/pencil.js: ✏️ Nice modular interactive 2D drawing library