HTML <canvas>要素は、Webページ上の長方形のオブジェクトとして表示されます。
HTMLキャンバス
<canvas>要素は、HTMLでゲームを作るために最適です。
<canvas>要素は、あなたがゲームを作るために必要なすべての機能を提供しています。
上に、描画書き込み、画像を挿入し、より多くのためにJavaScriptを使用して<canvas>
.getContext（「2D」）
<canvas>要素が組み込まれているオブジェクトと呼ばれるgetContext("2d")描画するためのメソッドとプロパティで、オブジェクトを。
あなたはについての詳細を学ぶことができる<canvas>要素、およびgetContext("2d")私たちの中に、オブジェクトキャンバスチュートリアル 。
始めます
ゲーム領域を作成することから始め、ゲームを作る、および描画できる状態にするには：
例
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>要素。