Canvas QueryはCanvasをjQueryのように扱えるライブラリです。

HTML5の新機能で知られるCanvasですが、あまり一般的に活用されているとは言いがたい状態です。それは扱いやすさに起因している気がしますが、今回紹介するCanvas Queryを使えばぐっと身近な存在になりそうです。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.25.50_thumb.1359373898.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.25.50.1359373898.png)
デモです。色をそれぞれ変えています。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.27.11_thumb.1359373906.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.27.11.1359373906.png)
こちらも様々な処理を施しています。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.27.21_thumb.1359373912.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-28 9.27.21.1359373912.png)
ミサイルの色を変えているデモ。

Canvas QueryはCanvasをjQueryのように扱えるようにするライブラリとなっています。キャンバスを生成し、.fillStyle('#FF0000')のようにしてメソッドを実行します。チェーンメソッドも使えます。多彩に用意されたメソッドを使えば、Canvasを手軽に扱えるようになりそうです。

Canvas QueryはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

jQueryは数あるJavaScriptフレームワークの中でも特にシェアの高い存在です。だからこそjQueryのように別なオブジェクトを扱えるというのは大きなメリットになります。既にjQueryを知っているプログラマーであればすぐにCanvas Queryも使えるようになるでしょう。

フレームワークにとって学習コストの低さというのは利点の一つになります。ソフトウェアを開発する際にはつい独自のやり方を貫きたくなる時もありますが、既にあるものに寄り添って作ると利用者にとってメリットが大きいはずです。

Canvas Query

rezoner/CanvasQuery · GitHub