HTML5のcanvas要素の描画コンテキストをgetElementById()の代わりにjQueryで取得する
HTML5のcanvas要素の描画コンテキストを、getElementById()の代わりにjQueryで取得する方法です。jQueryな方はタイトルだけで記事の主旨がお分かりと思いますので読み飛ばしてください（笑）。
１．canvas要素の描画コンテキストとは
前置きになりますが、canvas要素は描画機能にアクセスするためのgetContext()というDOMメソッドを持っています。canvas要素のDOMノードを取り出し、取り出したDOMノードに対してgetContext('2d')を実行することで、描画機能にアクセス可能な「描画コンテキスト」を取得します。
getContext()の引数の「2d」は、描画コンテキストの種類を示し、現在「2d」固定です。要するに「2d」を指定することで「2D描画コンテキスト」を取得します。将来的に、例えば「3d」という引数が増えて3D描画コンテキストを取得できるようになるかもしれません。
２．getElementById()が使われる箇所
ネットで色々調べたところ、描画コンテキスト取得のサンプルは概ね次のようになっていました。以下はMDNからの引用です。
<script>
var canvas = document.getElementById('tutorial');
if (canvas.getContext){ // 未サポートブラウザでの実行を抑止
var ctx = canvas.getContext('2d');
// 描画用のコードを記述
}
</script>
<canvas id="tutorial" width="150" height="150"></canvas>ポイントは、getContext()を実行するためのDOM要素「canvas」を取得するためにgetElementById()を実行している赤色部分で、単純にこの部分をjQueryで表現できないかと思った次第です。
３．jQueryを適用する
getElementById()の代わりにjQueryを適用するには、次のように記述します。
<script>
var canvas = $('#tutorial').get(0);
if (canvas.getContext){ // 未サポートブラウザでの実行を抑止
var ctx = canvas.getContext('2d');
// 描画用のコードを記述
}
</script>
<canvas id="tutorial" width="150" height="150"></canvas>または、
<script>
var canvas = $('#tutorial')[0];
if (canvas.getContext){ // 未サポートブラウザでの実行を抑止
var ctx = canvas.getContext('2d');
// 描画用のコードを記述
}
</script>
<canvas id="tutorial" width="150" height="150"></canvas>このように指定する理由は、$()で返却される値が配列になっているためです。id指定で返却値が1つと分かっている場合でも配列で返却されます。
jQueryオブジェクトとして扱う場合は配列を意識することはあまりないと思いますが、ここではDOM要素として取得するために配列を意識した処理を行っています。
ちなみに、未サポートブラウザのチェックが不要であれば次のように書けます。
<script>
var context = $('#tutorial').get(0).getContext('2d');
// 描画用のコードを記述
}
</script>
<canvas id="tutorial" width="150" height="150"></canvas>以上です。認識誤り等ありましたらご指摘ください。
- HTML5のcanvasを使ったお絵かきツール詳説
