canvasの設定方法 #JavaScript

canvasの設定方法

ブラウザに自作のゲームを表示する場合に、HTML5から使用できるようになったcanvas要素を使用することでスクリーンに表示することができるようになりました。

設定方法を記載します。

<body>
  <canvas id="canvas" width="700" height="700"></canvas>
</body>

まず、body要素内にcanvas要素を記述します。id属性は後でjavascriptでcanvas要素を取得するために設定します。
widthでブラウザに表示するcanvasの画面の横幅を指定します。
heightでブラウザに表示するcanvasの画面の縦幅を指定します。

  <script>
    var ctx;
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
  </script>

次にhead要素内にscript要素を記述します。変数canvasに先ほどbody内のcanvas要素に指定したid属性を取得するための記述をします。
変数ctxには上記の記述をすることでブラウザのcanvasの画面に描画する準備が完了します。「getContext( )」メソッドはcanvasに描画するためのインスタンスを取得するという機能があります。引数の「2d」は２Dの描画をするという意味があります。今現在２D以外の3
Dにも対応したのかは不明です。