Membuat Animasi Lingkaran Dengan Canvas HTML5 – Javascript

Pada perkembangannya, HMTL sudah mencapai generasi ke lima atau istilah kerennya disebut dengan HTML5. Di dalam HTML5 terdapat fitur-fitur baru dalam pengembangan website. Salah satunya yaitu canvas.

SAY HELLO TO CANVAS!

Canvas adalah sebuah tag dalam HTML5 yang digunakan untuk menggambar dengan bantuan javascript. Sesuai namanya “canvas”, di dalam canvas ini seorang web developer bisa menggambar menggambar isi dokumen HTML dengan sintaks-sintaks javascipt, bahkan bisa membuat animasi.

Pertanyaan besar kenapa harus pakai canvas kalau kita bisa membuat animasi dengan CSS? Alasannya karena lingkup manipulasi pembuatan animasi dengan canvas jauh lebih besar. Jika di dalam CSS anda hanya bisa memanipulasi elemen yang terbatas, di javascript anda bisa memanipulasi seluruh dokumen HTML.

Sebelum membaca lebih jauh, saya ingatkan kembali tutorial ini hanya akan membatasi pembuatan animasi dengan canvas HTML5. Let’s begin.

HTML

<head>
<style>

<!-- Memanggil font dari google font -->

<link href='http://fonts.googleapis.com/css?family=Carme' rel='stylesheet' type='text/css'>
</style>

<body>

<!-- Tag untuk memanggil canvas, atribut height dan width harus diletakkan dalam tag ini -->

<canvas id="mycanvas" height="300px" width="300px"></canvas>
<div class="container-button">

<!-- Tag button ini akan digunakan untuk menghentikan animasi -->

<button class="stop">Stop!</button>
</div>

</body>

Perhatikan baris ke-15, itu adalah tag yang digunakan untuk membuat canvas. Di dalam tag canvas tidak perlu dimasukkan apa-apa, karena kita akan membuat gambarnya dengan javascript.

CSS

 * {
  margin:0px;
  padding:0px;
  font-family: 'Carme', sans-serif;
}

#mycanvas {
  border: 2px solid #eee;
  border-radius: 5px;
  margin: 10px auto 10px;
  display: block;
}

.container-button {
  text-align: center;
  margin: 0 auto;
}

.stop {
   padding: 3px;  
}

Jika sintaks yang telah kita buat dicompile browser, hasilnya terlihat sebagai berikut. Hasilnya belum ada apa-apa karena kita belum menyisipkan javascript untuk menggambar canvas.

JAVASCRIPT

// Memanggil selektor DOM dari HTML yaitu id mycanvas
var mainCanvas = document.querySelector("#mycanvas");

        // Membuat canvas sebagai konten dua dimensi
        var mainContext = mainCanvas.getContext("2d");
        var canvasWidth = mainCanvas.width; // Lebar canvas
        var canvasHeight = mainCanvas.height; // Tinggi canvas

        // Memulai animation frame javascript
        var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;

        // Menghentikan animation frame javascript
        var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;

        // Variable angle digunakan untuk me-reset lebar lingkaran
        var angle = 0;

        function draw() {

            // Membersihkan canvas
            mainContext.clearRect(0, 0, canvasWidth, canvasHeight);

            // Mengisi background canvas dengan warna putih
            mainContext.fillStyle = "white";

            // Memasukkan background ke canvas yang sudah dibersihkan
            mainContext.fillRect(0, 0, canvasWidth, canvasHeight);

            // Memulai fungsi menggambar
            mainContext.beginPath();

            // Radius ini akan mengembalikan nilai yang berbeda setiap frame
            // Sehingga lingkaran ukurannya bisa berubah-rubah
            var radius = 10 + 60 * Math.abs(Math.cos(angle));
            mainContext.arc(150, 150, radius, 0, Math.PI * 2, false);
            mainContext.closePath();

            // Mengisi warna lingkaran
            mainContext.fillStyle = "#3498db";
            mainContext.fill(); 

            // Nilai angle akan berubah-ubah seiring perulangan frame
            angle += Math.PI / 32;
            var start = requestAnimationFrame(draw);

            // Memanggil selektor stop di tag button
            var stop = document.querySelector(".stop");                                 

           // Fungsi untuk menghentikan animasi
           stop.addEventListener('click', berhenti, false);
           function berhenti(e) {
            cancelAnimationFrame(start);
        }
        }

        // Mulai menggambar / animasi
        draw();

PENJELASAN

Setelah membaca kode yang panjang dan membingungkan, pasti membingungkan bagi anda yang belum kenalan sama javascript yang keren ini. Saya akan coba menjelaskan tentang kode yang baru saja kita buat.

1. Pertama, kita membuat variabel baru yaitu mainCanvas. Di dalam variabel ini kita masukkan selekor DOM dari id #mycanvas. mainCanvas adalah elemen canvas yang kita buat.

2. Lalu, kita membuat variabel baru yaitu mainContext. Di main context ini kita masukkan dari variabel mainCanvas. Fungsi getContext(“2D”) digunakan agar variabel mainCanvas bisa dirender (secara dua dimensi) oleh javascript.

3. Variabel mainWidth dan mainHeight untuk mengambil nilai lebar dan tinggi canvas.

4. Setelah itu, selanjutnya adalah membuat fungsi draw() dimana kita akan menggambar lingkaran dengan canvas.

5. Perhatikan di dalam fungsi draw() terdapat fungsi fillRect(0, 0, canvasWidth, canvasHeight). Nilai 0 pertama mengosongkan nilai canvas dari kiri dan 0 kedua mengosongkan nilai canvas dari arah atas.

fillrect 359x300 Membuat Animasi Lingkaran Dengan Canvas HTML5 Javascript

6. Setelah canvas dibersihkan dengan fungsi fillRect selanjutnya adalah memulai menggambar dengan fungsi beginPath(). Jangan lupa untuk mengakhiri fungsi menggambar ini ditutup dengan closePath().

7. Selanjutnya adalah membuat variabel radius, kita sengaja membuat radius ini sebagai variabel agar nilainya bisa kita modifikasi. Perhatikan operasi perkalian dan pertambahannya.

8. Sebelumnya kita sudah membuat variabel angle yang bernilai 0. Di dalam variabel radius terdapat operasi 1 + 60 * Math.abs(Math.cos(angle)). Fungsi Math.abs berguna untuk mengembalikan nilai di dalamnya menjadi positif (Masih ingat fungsi absolute di SMA?). Lalu fungsi Math.cos(angle) berguna untuk meng-cosinuskan nilai angle. Jika tadi nilai angle-nya = 0, maka setelah di-cosinus-kan nilainya berubah menjadi satu. Artinya fungsi radius ini akan mengembalikan nilai total 10 + 60 * 1 = 70. Semakin besar nilai radius semakin besar lingkaran yang dibuat. Tapi nilai radius ini hanya sementara karena requestAnimationFrame akan merender animasi 60 kali / detik. Jadi nilai radius 70 akan bertahan selama 1 detik.

9. Setelah membuat nilai radius kita akan memasukkan nilai radius ini ke dalam fungsi arc yang akan menggambar sang lingkaran. Perhatikan mainContext.arc(150, 150, radius, 0, Math.pi * 2 ,false). Dalam matematika, lingakaran bernilai 360 derajat atau 2 * phi , tapi karena di javascript kita tidak bisa menggunakan nilai derajat untuk operasi, maka kita menggunakan operasi phi. Lihat kembali ke fungsi. Pertama nilai 150 digunakan untuk menempatkan posisi lingkaran ke tengah dari kiri (width), dan 150 ke-dua untuk menempatkan posisi lingkaran ke tengah dari atas (height), lalu variabel radius yang telah dibuat, nilai ke empat adalah nilai 0 (artinya gambar lingkaran dimulai dari sudut 0 belum ada apa-apa), lalu Math.pi * 2 = 360 derajat yang akan membuat sebuah lingkaran.

10. Untuk urusan gambar menggambar sudah selesai di tahap ini, ditutup dengan closePath().

11. Lalu bagaimana dengan animasinya? Untuk melakukan animasi tersebut, kita harus merubah nilai lingkaran yang tadinya ber-radius 70 dengan merubah angle-nya. Angle += Math.Pi / 32, di fungsi ini kita akan memasukkan nilai baru ke variabel angle (Angle = 1 + 0.09 = 1.09). Di fungsi draw akan terus terjadi perulangan animasi yang akan merubah nilai radius setiap detik. Jadi nilai 1.09 akan kembali (secara bertahap) sampai ke nilai 70 yang akan membentuk animasi.

fps 359x300 Membuat Animasi Lingkaran Dengan Canvas HTML5 Javascript

12. Setelah itu, untuk memulai animasinya buat variabel start, di dalam variabel start dimasukkan fungsi membuat animasi yaitu requestAnimationFrame dengan parameter draw yang tadi dibuat.

13. Setelah selesai membuat animasinya, berarti tinggal satu fungsi lagi yaitu untuk membatalkan animasi. aitu dengan memanggil selektor tombol stop (.stop), tambahkan dengan eventListener. Jadi saat stop di-klik, maka akan menmbatalkan animasi yang ada di variabel start.

DEMO or DOWNLOAD

Fiuhh, capek juga nulis tutorial. Please share good readers!

Sumber:tutorial-webdesign.com

Sekian, terima kasih, semoga berguna :)

TIPS : Jika anda belum familiar dengan event listener dan animation javascript, silakan baca lebih lengkap di kirupa.com