HTML游戏 Canvas - 菜鸟教程

定义和使用

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

Canvas 元素

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

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

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

Canvas 元素

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

您可以在我们的 Canvas 教程中了解有关 HTML <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> 元素的第一个子节点插入。