konvajs/konva

これは何？

主な機能

• 01各図形が個別のイベントとドラッグ操作を持つシーングラフ。
• 02HTML5 Canvas上での変形、アニメーション、レイヤー単位の描画。
• 03ステージと図形の書き出し、および複雑なノードのキャッシュ。
• 04React、Vue、Svelte、Angular向けの公式ラッパー。
• 05必要な図形とフィルターだけを組み込めるモジュール式ビルド。
• 06node-canvasまたはskia-canvasを使ったNode.jsでのサーバーサイドレンダリング。

ユースケース

• 選択や変形が可能なオブジェクトを使った、ブラウザ内デザインエディタや画像エディタの構築。
• 画像上に共同作業用ホワイトボードやアノテーションツールを作成。
• ドラッグ可能なノードを使った、インタラクティブな図表、フローチャート、地図の描画。
• Node.jsサーバー上でCanvasの描画から画像を生成。

クイックスタート

1. 1

   npm から Konva をインストールします

   npm install konva
2. 2

   Konva をインポートし、プロジェクトで stage、layer、shape を作成します

3. 3

   Node.js でサーバーサイドレンダリングを行う場合は、canvas バックエンドもインストールします

   npm install konva canvas

使う前に知っておきたいこと

• !Node.js でのレンダリングには、canvas または skia-canvas パッケージを別途手動でインストールする必要があります。
• !DOM イベントはブラウザーでのみ動作し、canvas の機能サポートは選択したバックエンドによって異なります。

収録されている特集

トピック

よくある質問

konva とは？

インタラクティブな2Dグラフィックス、デザインエディタ、ホワイトボード、図表を作成するためのHTML5 Canvas向けJavaScriptフレームワーク。 Konvaは、JavaScriptとTypeScript向けの2D Canvasフレームワークです。シーングラフモデルを採用しているため、各図形はオブジェクトとして扱われ、個別のイベントやドラッグ操作、変形、アニメーション、キャッシュ、書き出し機能を備えています。開発者がピクセルを手動で再描画する必要はありません。

konva は無料で使えますか？ライセンスは？

konva は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

konva は今もメンテナンスされていますか？

活発にメンテナンス中。konva の最終コミットは 2026年11月5日 です。

konva は何に使えますか？

選択や変形が可能なオブジェクトを使った、ブラウザ内デザインエディタや画像エディタの構築。 画像上に共同作業用ホワイトボードやアノテーションツールを作成。 ドラッグ可能なノードを使った、インタラクティブな図表、フローチャート、地図の描画。 Node.jsサーバー上でCanvasの描画から画像を生成。

konva のインストール方法は？

npm から Konva をインストールします: npm install konva Konva をインポートし、プロジェクトで stage、layer、shape を作成します Node.js でサーバーサイドレンダリングを行う場合は、canvas バックエンドもインストールします: npm install konva canvas

konva はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/konvajs/konva