HTML5の表現力を引き上げる技術にCanvasがあります。しかし使うこなすためには覚えるべきことがたくさんあります。DOMで作るようにCanvasは使えないのが難点です。しかしCanvas用のライブラリも多数存在します。 今回はその一つ、Konvaを紹介します。2D向けのCanvas用ライブラリです。

Konvaの使い方

デモです。ルーレットが回転します。

回転している様子。

手書きができるデモ。

画像のサイズ変更。

ベジェ曲線。

絵合わせゲーム。

Konvaは描画するだけでなく、インタラクティブな操作にも対応しています。デスクトップはもちろん、モバイルブラウザにも使えます。レイヤーをサポートし、様々なシェイプをサポートしています。Canvasを使う際にはぜひKonvaと組み合わせてみてください。

KonvaはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Konva - JavaScript 2d canvas library konvajs/konva: Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.