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>
<link href='http://fonts.googleapis.com/css?family=Carme' rel='stylesheet' type='text/css'>
</style>
<body>
<canvas id="mycanvas" height="300px" width="300px"></canvas>
<div class="container-button">
<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
var mainCanvas = document.querySelector("#mycanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height;
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;
var angle = 0;
function draw() {
mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
mainContext.fillStyle = "white";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
mainContext.beginPath();
var radius = 10 + 60 * Math.abs(Math.cos(angle));
mainContext.arc(150, 150, radius, 0, Math.PI * 2, false);
mainContext.closePath();
mainContext.fillStyle = "#3498db";
mainContext.fill();
angle += Math.PI / 32;
var start = requestAnimationFrame(draw);
var stop = document.querySelector(".stop");
stop.addEventListener('click', berhenti, false);
function berhenti(e) {
cancelAnimationFrame(start);
}
}
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.
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.
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.
Informasi tentang Priyanka Chopra seorang artis cantik dari india sudah anda ketahui, kini giliran anda 
