HTML <canvas> 要素は、web ページに四角形のオブジェクトとして表示されます
<canvas> 要素は、HTML でゲームを作るのに最適です。
<canvas> 要素は、ゲームを作るために必要なすべての機能を提供します。
JavaScript を使用して、<canvas> に描画、書き込み、画像の挿入などを行います。
<canvas> 要素には、描画用のメソッドとプロパティを持つ
getContext("2d") オブジェクトと呼ばれる組込みオブジェクトがあります。
<canvas> 要素と
getContext("2d") オブジェクトの詳細については、object, 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]);
}
}
Try it Yourself »
オブジェクト myGameArea のプロパティとメソッドのより詳細は、このチュートリアルの後半で説明します。
関数 startGame() は、myGameArea オブジェクトの
メソッド start() を呼び出します。
start() メソッドは <canvas> 要素を作成し、
それを <body> 要素の最初の子ノードとして挿入します。