遊戲 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>
元素的第一個子節點。