HTML <canvas> elemen ditampilkan sebagai objek persegi panjang pada halaman web:
HTML Canvas
The <canvas> elemen sangat cocok untuk membuat game di HTML.
The <canvas> elemen menawarkan semua fungsi yang Anda butuhkan untuk membuat game.
Gunakan JavaScript untuk menggambar, menulis, menyisipkan gambar, dan banyak lagi, ke <canvas> .
.getContext ( "2d")
The <canvas> elemen memiliki built-in objek, yang disebut getContext("2d") objek, dengan metode dan properti untuk menggambar.
Anda dapat mempelajari lebih lanjut tentang <canvas> elemen, dan getContext("2d") objek, di kami Canvas Tutorial .
Memulai
Untuk membuat sebuah game, mulai dengan membuat area game, dan membuatnya siap untuk menggambar:
Contoh
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]);
}
}
Cobalah sendiri " Objek myGameArea akan memiliki lebih banyak sifat dan metode kemudian dalam tutorial ini.
Fungsi startGame() memanggil metode start() dari myGameArea objek.
The start() metode menciptakan <canvas> elemen dan memasukkan sebagai childnode pertama dari <body> elemen.