Membuat animasi benda bergerak dengan HTML 5

Di HTML 5 terdapat beberapa komponen baru salah satunya yang saya suka adalah canvas. Di canvas ini kita dapat melakukan draw(menggambar).

Nah pada postingan kali ini saya akan tunjukkan bagaimana membuat animasi benda bergerak dengan HTML 5. Sebenarnya bukan benda bergerak, melainkan proses draw yang diulang-ulang di atas canvas. Ok mari kita menuju TKP.

Buat file skrip-ku.js dan index.html

Berikut ini isi file index.html

<script type="text/javascript" src="skrip-ku.js"></script>

<canvas id="kanvasku" width="400" height="300" style="border: 1px solid #000000; background: #000;">
</canvas>

Coba kita lihat, bagaimana di HTML 5 kita bisa membuat canvas.

<canvas id="kanvasku" width="400" height="300" style="border: 1px solid #000000; background: #000;">
</canvas>

Mari kita lihat isi file skrip-ku.js

var mykontek;
var x = 1; step = 1;
var lebar = 400;
var tinggi = 300;

function init(){
mykontek = document.getElementById("kanvasku").getContext('2d');
gerak()
}

function gerak(){
mykontek.beginPath();
mykontek.clearRect(0,0, lebar, tinggi); /* membersihkan area kanvas */
mykontek.arc(x, 100, 20, 0, Math.PI*2, false); /* membuat/ menggambar obyek lingkaran dg diameter 20 pixel */
mykontek.fillStyle = "#fff"; /* menentukan warna */
mykontek.fill(); /* mewarnai contect */

x = x + step; /* nilai x selalu bertambah sehingga posisi benda(x, 100) berubah */

if(x >= lebar || x <= 1) { /* jika x mencapai lebar kanvas, maka gerak benda berubah arah -step */
step = -step;
}

setTimeout('gerak()', 5); /* setTimeout('namafungsi()', interval);*/

Lihat demonya disini