canvasタグにおける「getContext('2d')」って何？を説明します

この記事で明らかにすること
- 疑問
- 先に結論
canvasとは？
getContext('2d');とは？
- 2Dってことは3Dもいける？？

この記事で明らかにすること

疑問

<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)'; //塗りつぶしの色は赤
    }
}