canvas をjQueryで使う。

ブラウザ上でお絵描きのできる canvas 要素をjQuery で操作してみた。

まず、jQuery をインクルードした白紙のページを Google Chrome で開き、Shift + Ctrl + J で JavaScript コンソールを表示する。別のウインドウに表示されてしまったら、左下隅の四角形のアイコンをクリックすると同じWindowに表示させることができる。

最初にキャンバス要素を作成する。

$('body').append('<canvas id="sample" width=300 height=150></canvas>');

次に canvas の2Dコンテキストオブジェクトを作る。

c=$('canvas')[0].getContext('2d');

なぜ $('canvas')[0] なのだろうと思うかもしれないが、$('canvas') で検索できるDOM要素は複数あるはずだからその中の一つを指定する必要がある。この時 [0] で取り出せるのは jQuery オブジェクトではなくDOM要素なので注意が必要。この例では、getContext がDOM要素のメソッドなので帰って好都合なのだ。jQuery オブジェクトから裸のDOM要素を取り出すメソッドは他に .get() がある。get を使うと上の式は、$('canvas:first-child').get(0).getContext('2d') になる。.get(0) となっているが、.get() ではオブジェクトの配列が得られるため .getContext('2d') に対し TypeError になる。.get(0) なら、オブジェクトの配列の最初の要素が得られる。

2Dコンテキストオブジェクト c に、三角形のパスを定義する。

c.beginPath();
c.moveTo(150,20);
c.lineTo(250, 130);
c.lineTo(50, 130);
c.closePath();

定義したパスを描画する。

c.stroke();

塗りつぶしてみる。

c.fill();

赤で塗りつぶしてみる。

c.fillStyle = 'red';
c.fill();

何となく canvas の使い方が分かった気になった。

お絵描きパッドの jQuery プラグインもある。jQuery のプラグインページの DrawBox の "Try out a demonstration" をクリックするとデモを使ってみることができる。
[PR]
by tnomura9 | 2011-01-03 07:54 | JavaScript | Comments(4)
Commented by neniu at 2012-09-11 15:12 x
$('canvas:first-child').get().getContext('2d') だと,get() が配列を返すのでうまくいかないと思います。
$('canvas:first-child').get(0).getContext('2d') とか $('canvas').get(0).getContext('2d') ではないでしょうか。
Commented by tnomura9 at 2012-09-11 21:34
neniu さん、コメントありがとうございました。ご指摘のとおり get() ではTypeError になりました。get(0) で動作しました。本文を訂正します。ありがとうございました。
Commented by kagomeme at 2015-06-18 13:22
$(".myCanvas").each(function(){

var ctx=$(this).getContext("2d")...


↑このように .each() で実行できれば簡単なんですが・・・
Commented by tnomura9 at 2015-06-19 00:42
kagomeme さんコメントありがとうございました。
最近 jQuery を全く触っていないので、jQuery のオブジェクトと DOM 要素の関係などが全く思いつかなくなっています。きちんとお返事できるようになるには時間がかかりそうです。申し訳ありません。
<< 神は細部に宿る CLEditor プラグインの中身 >>