ゲームキャンバス
HTML<canvas>要素は、Webページ上に長方形のオブジェクトとして表示されます。
HTMLキャンバス
この<canvas>要素は、HTMLでゲームを作成するのに最適です。
この<canvas>要素は、ゲームの作成に必要なすべての機能を提供します。
JavaScriptを使用して、画像の描画、書き込み、挿入などを行い
<canvas>ます。
.getContext（ "2d"）
この<canvas>要素には、オブジェクトと呼ばれる組み込みのgetContext("2d")オブジェクトがあり、描画用のメソッドとプロパティがあります。
<canvas>要素と
getContext("2d")オブジェクトの詳細については、Canvasチュートリアルをご覧ください。
はじめに
ゲームを作成するには、まずゲームエリアを作成し、描画の準備をします。
例
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
myGameAreaこのチュートリアルの後半で、オブジェクトにはさらに多くのプロパティとメソッドが含まれるようになります。
この関数は、オブジェクトstartGame()のメソッドを呼び出します。
start()
myGameArea
この
start()メソッドは<canvas>要素を作成し、それを要素の最初の子ノードとして挿入し<body>ます。