HTML5のcanvas要素の描画コンテキストをgetElementById()の代わりにjQueryで取得する

HTML5のcanvas要素の描画コンテキストをgetElementById()の代わりにjQueryで取得する

Posted at January 13,2012 2:22 AM
Tag:[canvas, HTML5, jQuery]

HTML5のcanvas要素の描画コンテキストを、getElementById()の代わりにjQueryで取得する方法です。jQueryな方はタイトルだけで記事の主旨がお分かりと思いますので読み飛ばしてください(笑)。

1.canvas要素の描画コンテキストとは

前置きになりますが、canvas要素は描画機能にアクセスするためのgetContext()というDOMメソッドを持っています。canvas要素のDOMノードを取り出し、取り出したDOMノードに対してgetContext('2d')を実行することで、描画機能にアクセス可能な「描画コンテキスト」を取得します。

getContext()の引数の「2d」は、描画コンテキストの種類を示し、現在「2d」固定です。要するに「2d」を指定することで「2D描画コンテキスト」を取得します。将来的に、例えば「3d」という引数が増えて3D描画コンテキストを取得できるようになるかもしれません。

2.getElementById()が使われる箇所

ネットで色々調べたところ、描画コンテキスト取得のサンプルは概ね次のようになっていました。以下はMDNからの引用です。

Canvas チュートリアル - 基本的な使いかた
<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で表現できないかと思った次第です。

3.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>

以上です。認識誤り等ありましたらご指摘ください。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)