HTML5のcanvas要素をjQueryで取得する方法！

サクウェブＴＶはコチラ↓↓↓

通常、HTML5のcanvasを扱う場合にはJavaScriptで

var canvas = document.getElementById("canvas");

などとしてid="canvas"のようにしたcanvas要素を取得したあとに操作していきます。

しかし、場合によってはcanvasにidを指定したくなかったり、上記の記述が長くて煩わしい場合もあるかもしれません。

そんなとき、

var canvas = $("canvas[name='can']");

みたいにjQueryで取得できたら楽そうなのですが、これではcanvasは動きません。

これでは、canvasにjQueryオブジェクトが代入されてしまうためcanvasのAPIにアクセスできないためです。

しかし、実はjQueryオブジェクトは配列のような構造をしており、

$("#canvas")[0]

などとして通常のオブジェクトを取得することができるのです。

ですから、上記スクリプトを少し変えて

var canvas = $("canvas[name='can']")[0];

とすれば問題なく取得できるんですね。