游戏 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>
元素的第一个子节点。