HTML <canvas> öğesi bir web sayfasında bir dikdörtgen nesne olarak görüntülenir:
HTML Tuval
<canvas> öğesi HTML oyunlar yapmak için idealdir.
<canvas> öğesi oyunlar yapmak için gereken tüm işlevselliği sunuyor.
Üzerine, çizmek yazma, resimler eklemek ve diğer işlemler için JavaScript kullanın <canvas> .
. getContext("2d")
<canvas> elemanının dahili bir nesne olarak adlandırılır sahip getContext("2d") çekilmesi için yöntem ve özelliklere sahip bir nesne.
Sen hakkında daha fazla bilgi edinebilirsiniz <canvas> elemanı ve getContext("2d") bizim nesne, Tuval Öğreticisi .
Başlamak
Bir oyun alanı oluşturarak başlamak, bir oyun yapmak ve çizim için hazır hale getirmek için:
Örnek
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]);
}
}
Kendin dene " Nesne myGameArea sonra bu eğitimde daha fazla özellik ve yöntemleri vardır.
Fonksiyon startGame() metodu çağırır start() arasında myGameArea nesnesi.
start() yöntemi oluşturur <canvas> elemanı ve birinci childNode öğesine olarak ekler <body> elemanı.