JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」
2013年03月15日-
スポンサード リンク
Fabric.js Javascript Canvas Library
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」
canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです
単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです
ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。
これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ?と毎回リファレンスを牽く必要もなくなりますね
他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず
デモページも結構充実しており、眺めればどんなことができるのか分かるはず
関連エントリ
- jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」
- canvasを使って画像をスタイリングするチュートリアル
- オープンソースのHTML5お絵かきウィジェット「Literally Canvas」
- Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」
- CSS3やCanvas、JS等を使ったローディング画像実装プラグイン12
- HTML5のcanvasをもっと簡単に操作できる「KineticJS」
関連の記事検索:canvas
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 2000個近いフリーのピクトグラムアイコン「tabler-icons」
- ページスクロールで背景ムービーが動くページが作れる「ScrollMovie」
- テキストがシャッフルされてかっこいいMENU実装
- 手書き風ピクトグラムアイコン400種「Doodle Icons」
- 色のカスタマイズやブレンドをできるオンラインツール「hue.tools」
- JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」
- ダークモードにも対応したシンプルなページ作成に使える「Simple.css」
- Three.jsで画像をピクセルっぽくゆがめるサンプル
- スクロールに応じて3Dオブジェクトが動作するThree.jsを使ったデモ
- 丸文字が可愛いフリーフォント「ZEN丸ゴシックN」
- 過去のエントリ