W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 游戏画布



HTML <canvas> 元素在网页上显示为矩形对象:


HTML Canvas

在HTML中,<canvas> 元素非常适合制作游戏。

<canvas> 元素提供了制作游戏所需的所有功能。

使用JavaScript来绘制,写入,插入图像等等,到 <canvas> 上。


.getContext("2d")

<canvas> 元素有一个内置对象,称为 getContext("2d") 对象,具有用于绘制的方法和属性。

您可以在我们的 Canvas 教程 中了解更多关于 <canvas> 元素和 getContext("2d") 对象的信息。


准备开始

要做一个游戏,首先创建一个游戏区域,并准备好绘图:

Example

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