Malisa Huzaifa - Web Multimedia HTML6 Canvas & SVG

92 Selanjutnya menentukan nilai max dan min dari x dengan menggunakan var minX=20; dan var maxX=175;. Membuat variable berniali minx dengan code var x=minX; kemudian menentukan speed dari animasi yang akan ditampilkan dengan menggunakan var speedX=1;. Agar gambar bisa digerakkan maka kita tambahkan code var direction=1; dan setting posisi dari y dengan code var y=20;. Selanjutnya kita akan menampilkan sebuah gambar yang nantinya akan diberikan animasi dimana pada code ini kita menggunakan file dengan nama laptopmee yang bertipe png. Langkah awal untuk menampilkan gambar dengan menggunakan var img=new Image(); dan kemudian kita akan membaca image yang akan digunakan dengan code img.src="laptopmee.png";. Perlu diingat gambar yang kita gunakan harus tersimpan di folder yang sama dengan file program html yang dibuat. Jika sudah selesai proses untuk menampilkan gambar, langka berikutnya adalah memanggil sebuah perintah yang ada didalam fungsi untuk gambar yang telah disediakan menggunakan img.onload=start;. Fungsi star yang dipanggil harus kita sediakan dengan menuliskan function start(){..} yang mana fungsi ini berisi perintah untuk memulai animasi dengan perintah requestAnimationFrame(animate); yang mana pada code animasi dijalankan dengan memanggil fungsi animate. Selanjutnya karna ada pemanggilan fungsi animate maka kita perlu sediakan fungsi ini dengan membuat function animate(time){..}

RkJQdWJsaXNoZXIy MTM3NDc5MQ==