Game 画布

---

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

---

HTML 画布

<canvas> 元素非常适合用 HTML 制作游戏。

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

使用 JavaScript 在 <canvas> 上绘制、写入、插入图像等。

---

.getContext("2d")

<canvas> 元素有一个内置对象，称为 getContext("2d") 对象， 带有绘图的方法和属性。

您可以在我们的画布教程中了解有关 <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()。