この記事で明らかにすること
疑問
<canvas>
とは?getContext('2d')
とは?
先に結論
<canvas>
とは?- HTMLとJavaScriptで図形を書く機能
getContext('2d')
とは?- canvasを使うときに2D図形を扱うよを宣言する
canvasとは?
このサイト(<canvas>タグで図形を描く-HTML5リファレンス)がとてもわかりやすいので引用させていただきます。
canvasはHTML5で登場したタグで図形を扱うことができます。
ただし癖がちょっとありまして<canvas></canvas>
だけでは図形を描くことができません。どうするかというとJavaScriptを使います。
例えばこのコードをみてください。
HTMLは<canvas>
をとりあえず配置しているだけですね。間にある文章はcanvasが使えないブラウザで表示させるものです。
<canvas id="sample1" style="background-color:black;">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
そしてこちらはJavaScriptです。
<canvas>
で指定したリソースに対して四角を描けと命令しています。
function sample() { // sample1クラスのcanvasタグの描画コンテキストを取得 var canvas = document.getElementById('sample1'); if (canvas.getContext) { // 2Dを描画できるように設定 var context = canvas.getContext('2d'); //左から20上から40の位置に、幅100高さ100の四角形を描く context.fillRect(20,40,100,100); //色を指定する context.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤 } }
実際に表示するとこんな感じです。
getContext('2d');とは?
先ほど紹介したcanvasにて2次元(2D)を扱うための命令です。
2Dってことは3Dもいける??
では3Dを扱うにはどうすれば良いでしょう? その時はWebGLという技術を使用します。
実際にみてみましょう。(コードは webgl-examples/tutorial/sample5 at gh-pages · mdn/webgl-examples · GitHub より引用します)
このように、WebGLの技術をつかうとHTMLとJavaScriptで3Dを表現することができます。
もちろん画像を使ってWeb上で3Dゲームを作ることもできます。
WebGLを使ったサイトがまとめられた記事はこちら