Halo, tutorial kali ini akan mengajarkan cara membuat animasi sederhana menggunakan HTML5 canvas
Seperti biasa, kita mulai dengan basic markup:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
Setelah itu kita tambahkan sedikit style dan tag <canvas> tentunya
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style>
canvas { border:1px solid black; }
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Sekarang, kita akan membuat sebuah kotak di canvas tersebut
window.onload=function() {
c=document.getElementById("canvas");
a=c.getContext('2d');
a.fillRect(0,100,50,50);
};
Nah, cara kita membuat kotak tersebut bergeser ke kanan adalah dengan menghapus kanvas tersebut, membuat ulang kotak tapi kali ini kotaknya sedikit ke kanan, menghapus kanvas lagi, membuat kotak lagi, dst.
Untuk mendapatkan efek seperti itu kita harus memasukkan dalam function dan memanggil function itu terus-menerus. Mari kita edit kodenya:
window.onload=function() {
c=document.getElementById("canvas");
a=c.getContext('2d');
x=0;
y=100;
animate();
function animate() {
a.clearRect(0,0,c.width,c.height);
a.fillRect(x,y,50,50);
x+=2;
setTimeout(animate,30);
}
};
Jadi, posisi dari si kotak tersebut tersimpan dalam variabel x dan y, ketika fungsi animate() dijalankan, canvas dihapus, menggambar kotak sesuai dengan x dan y, kemudian menambah nilai x dengan 2 (biar bergeser ke kanan) dan membuat timeout untuk menjalankan fungsi animate() tersebut setelah 30 millisecond, jadi karena nilai x bertambah, posisi kotak akan terus ke kanan
Sebernarnya itu sajalah basic dari animasi HTML5 Canvas, cuma karena ane baik :D, jadi ane akan memberikan kode yang bermain-main dengan animasi ini :D
Kodenya bisa dilihat disini (penjelasan ada di komentar kode)
Sekian dari ane :D
Semoga bermanfaat :D
