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