Канвас для игр

HTML <canvas> элемент отображается на веб-странице как прямоугольный объект:

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> в элементе.