63 Referensi : Learning HTML5 Canvas (modifikasi) Kita akan coba membahas setiap bagian dari code diatas. Seperti contoh sebelumnya langkah awal adalah menyediakan sebuah canvas dengan tag <canvas id="canvas" width=400 height=400></canvas>. Seperti penjelasan sebelumnya proses akan dilakukan ketika klik sebuah button maka disni kita juga harus sediakan sebuah button pada bagian body html dengan tag <p><button type="button" id="animasi" >Lihat Animasi</button><p> code ini kita beri nama id animasi dan untuk nama buttonnya Lihat Animasi. Code tersebut juga menggunakan css untuk memberikan garis pinggir pada canvas dengan body background berwarna putih dan pinggiran canvas dengan warna merah menggunakan code body { background-color : white; } dan #canvas { border:1px solid red;}. Kita pindah pada bagaian javascrip dimana pada bagian awal kita sediakan code untuk inisialisasi dari button yang digunakan dengan membuat tag const btndownload = document.querySelector("#animasi") yang mana code ini membuat sebuah variable baru dengan nama btndownload yang merupakan inisialisasi untuk id = animasi pada button. Setelah inisialisai button sudah terbentuk kita masuk kebagian aksi ketika button tersebut diklik dengan menggunakan code btndownload.addEventListener ("click",function(){ .. }.
RkJQdWJsaXNoZXIy MTM3NDc5MQ==