遊戲 Canvas
HTML <canvas> 元素在網頁上顯示為一個矩形物件
HTML Canvas
HTML <canvas> 元素非常適合製作遊戲。
HTML <canvas> 元素提供了製作遊戲所需的所有功能。
使用 JavaScript 在 <canvas> 上繪製、書寫、插入影像等。
.getContext("2d")
<canvas> 元素有一個內建物件，稱為 getContext("2d") 物件，該物件具有繪製方法和屬性。
你可以在我們的 Canvas 教程 中瞭解有關 <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() 呼叫 myGameArea 物件的 start() 方法。
start() 方法建立一個 <canvas> 元素，並將其插入為 <body> 元素的第一個子節點。
