Apa itu HTML Canvas?
Elemen HTML <canvas>digunakan untuk menggambar grafik, dengan cepat, melalui skrip (biasanya JavaScript).
Elemen tersebut <canvas>hanyalah wadah untuk grafik. Anda harus menggunakan skrip untuk benar-benar menggambar grafik tersebut.
Canvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, teks, dan menambahkan gambar.
Kanvas HTML Dapat Menggambar Teks
Kanvas dapat menggambar teks berwarna, dengan atau tanpa animasi.
Kanvas HTML Dapat Menggambar Grafik
Canvas memiliki fitur hebat untuk presentasi data grafis dengan gambaran grafik dan bagan.
Contoh Kanvas
Dalam HTML, suatu <canvas>elemen terlihat seperti ini:
<canvas id="myCanvas" width="200" height="100"></canvas>
Atribut iddiperlukan (sehingga dapat dirujuk oleh JavaScript).
Atribut widthdan heightmenentukan ukuran kanvas.
Tips: Ukuran kanvas default adalah 300px (lebar) x 150px (tinggi).
Tip: Anda dapat memiliki beberapa <canvas>elemen pada satu halaman HTML.
Secara default, <canvas>elemen tidak memiliki batas dan konten.
Untuk menambahkan batas, gunakan styleatribut:
coba masukkan kode html berikut:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
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]);
}
}
</script>
<p>kita sudah membuat kanvas tempat membuat game! (or at least an empty canvas)</p>
</body>
</html>
Tambahkan Komponen
Buat konstruktor komponen, yang memungkinkan Anda menambahkan komponen ke dalam gamearea.
Konstruktor objek disebut component, dan kita membuat komponen pertama kita, yang disebut myGamePiece:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
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]);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
</script>
<p>kita sudah menambah komponen game pada kanvas, sebuah kotak merah!</p>
</body>
</html>
Dapatkan Kendali
Sekarang kita ingin mengendalikan kotak merah.
Tambahkan empat tombol, atas, bawah, kiri, dan kanan.
Tulis fungsi untuk setiap tombol untuk menggerakkan komponen ke arah yang dipilih.
Buat dua properti baru di componentkonstruktor, lalu beri nama speedXdan speedY. Properti ini digunakan sebagai indikator kecepatan.
Tambahkan fungsi dalam componentkonstruktor, yang disebut newPos(), yang menggunakan properti speedXdan speedYuntuk mengubah posisi komponen.
Fungsi newpos dipanggil dari fungsi updateGameArea sebelum menggambar komponen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
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]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY -= 1;
}
function movedown() {
myGamePiece.speedY += 1;
}
function moveleft() {
myGamePiece.speedX -= 1;
}
function moveright() {
myGamePiece.speedX += 1;
}
</script>
<div style="text-align:center;width:480px;">
<button onclick="moveup()">UP</button><br><br>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button><br><br>
<button onclick="movedown()">DOWN</button>
</div>
<p>If you click a button the red square will start moving. Click the same button many times, and it will move faster and faster.</p>
</body>
</html>
Berhenti Bergerak
Jika Anda mau, Anda dapat membuat kotak merah berhenti saat Anda melepaskan tombol.
Tambahkan fungsi yang akan mengatur indikator kecepatan ke 0.
Untuk menangani layar normal dan layar sentuh, kami akan menambahkan kode untuk kedua perangkat:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
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]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY = -1;
}
function movedown() {
myGamePiece.speedY = 1;
}
function moveleft() {
myGamePiece.speedX = -1;
}
function moveright() {
myGamePiece.speedX = 1;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div style="text-align:center;width:480px;">
<button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
<button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
<button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
</div>
<p>Jika Anda mengklik tombol, kotak merah akan mulai bergerak. Pergerakan akan berhenti saat Anda berhenti menekan tombol.</p>
<p>Kita telah menambahkan perintah "ontouchstart" pada tombol, untuk membuat contoh ini berfungsi pada perangkat sentuh.</p>
</body>
</html>
