HTML <canvas> элемент отображается в виде прямоугольного объекта на веб - странице:
HTML Canvas
<canvas> элемент идеально подходит для создания игр в HTML.
<canvas> Элемент предлагает все функциональные возможности , необходимые для создания игр.
Рисовать, писать, вставлять изображения, и многое другое, на JavaScript Используйте <canvas> .
.getContext ( "2d")
<canvas> элемент имеет встроенный объект, называемый getContext("2d") объекта, с методами и свойствами для рисования.
Вы можете узнать больше о <canvas> элемент, и getContext("2d") объекта, в нашем Canvas Учебник .
Начать
Для того, чтобы сделать игру, начните с создания игровой зоной, и сделать его готовым для рисования:
пример
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> элемент и вставляет его в качестве первого childnode из <body> элемента.