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にも対応したのかは不明です。