HTML <canvas> element jest wyświetlany w postaci prostokątnego obiektu na stronie internetowej:
HTML Canvas
<canvas> elementu jest idealny do tworzenia gier w formacie HTML.
<canvas> elementu oferuje wszystkie funkcje potrzebne do tworzenia gier.
Użyj JavaScript rysować, pisać, wstawiać zdjęcia i inne, na <canvas> .
.getContext ( "2d")
<canvas> element ma wbudowany obiektu, zwany getContext("2d") obiekt, z metodami i właściwościami do rysowania.
Możesz dowiedzieć się więcej o <canvas> elementu, a getContext("2d") obiektu, w naszym Canvas Tutorial .
Zaczynać
Aby stworzyć grę, należy zacząć od utworzenia strefy gier i przygotowania go do rysowania:
Przykład
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]);
}
}
Spróbuj sam " Przedmiotem myGameArea będą miały więcej właściwości i metody, w dalszej części tego podręcznika.
Funkcja startGame() wywołuje metodę start() z myGameArea obiektu.
start() metoda tworzy <canvas> elementu i wstawia go jako pierwszy childNode w <body> elementu.