Płótno z grą
Element HTML <canvas>jest wyświetlany na stronie internetowej jako prostokątny obiekt:
Płótno HTML
Element <canvas>doskonale nadaje się do tworzenia gier w HTML.
Element <canvas>oferuje wszystkie funkcje potrzebne do tworzenia gier.
Użyj JavaScript, aby rysować, pisać, wstawiać obrazy i nie tylko w
<canvas>.
.getContext("2d")
Element <canvas>ma wbudowany obiekt, zwany getContext("2d")obiektem, z metodami i właściwościami do rysowania.
Możesz dowiedzieć się więcej o <canvas>elemencie i
getContext("2d")obiekcie w naszym samouczku dotyczącym płótna .
Zaczynaj
Aby stworzyć grę, zacznij od stworzenia obszaru gry i przygotuj 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]);
}
}
myGameAreaW dalszej części tego samouczka obiekt będzie miał więcej właściwości i metod.
Funkcja startGame()wywołuje metodę
start()obiektu
myGameArea.
Metoda
start()tworzy <canvas>element i wstawia go jako pierwszy węzeł podrzędny <body>elementu.