Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

93 yang mana pada bagian inilah proses animasi cross image dimana dimulai dari menghapus bagian pergerakan dari image dengan menggunakan ctx.clearRect(0,0,cw,ch);. Kemudian mulai menampilkan gambar dengan ctx.drawImage(img,x,y);. Karna program menampilkan animasi secara terus menerus maka kita menambahkan x += speedX * direction; untuk menentukan nilai x. Lalu tambahkan tag if(x<minX){ x=minX; direction*=-1; } dimana akan di proses jika x bernilai kecil dari minX dan if(x>maxX){ x=maxX; direction*=-1; } akan diproses jika nilai x besar dari maxX. Dan tearakhir ditutup dengan code requestAnimationFrame(animate); untuk melakukan perulangan animasi. Berikut ini model otput ketika program di jalankan. Gambar akan bergerakdari kiri kenan secara terus-menerus.

RkJQdWJsaXNoZXIy MTM3NDc5MQ==