НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Графіка. Уроки W3Schools українською для початківців

En

Canvas Гра


HTML елемент <canvas> відображається як прямокутний об’єкт на вебсторінці:


HTML Canvas

Елемент <canvas> ідеально підходить для створення ігор на HTML.

Елемент <canvas> пропонує всі функції, необхідні для створення ігор.

Використовуйте JavaScript, щоб малювати, писати, вставляти зображення тощо на <canvas>.


.getContext("2d")

Елемент <canvas> має вбудований об’єкт, який називається об’єктом getContext("2d"), із методами та властивостями для малювання.

Ви можете дізнатися більше про елемент <canvas> і об’єкт getContext("2d") в Canvas Підручнику на нашому сайті W3Schools українською.


Початок

Щоб створити гру, почніть зі створення ігрової зони та підготуйте її до малювання:

Приклад

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() викликає метод start() об’єкта myGameArea.

Метод start() створює елемент <canvas> та вставляє його як перший дочірній вузол елемента <body>.