Pembuatan animasi dengan HTML5 Canvas dapat dilakukan oleh siapapun. Sebagai siswa atau guru, anda juga dapat membuatnya. Peralatan yang dibutuhkan tidak banyak. Anda cukup menggunakan komputer atau laptop yang telah terinstall dengan sistem operasi terkini. Dengan text editor dan browser favorit anda dapat memulai membuat animasi menggunakan HTML5.

Sekarang, kita mencoba memulai dengan membuka text editor  dan menulis kode berikut:


<!DOCTYPE HTML>
<html>

<head>

<style type="text/css">
</style>

</head>

<body>
<div align="center">
<canvas id="canvas"></canvas>
</div>
</body>

</html>

Kode di atas merupakan kode dasar yang mengaktifkan fitur canvas dari HTML5. Pada elemen head, dapat ditambahkan informasi karakter dan judul pada tab browser anda. Pada elemen yang sama juga dapat ditambahkan style yang mengatur tata letak dan tampilan tiap elemen yang anda buat. Kode tambahan tersebut dapat ditulis seperti berikut:


<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Canvas Animated Piston</title>

<style type="text/css">
body {
      width: 100%;
      margin: 10;
      overflow: hidden;
}

canvas {
      border: 1px solid;
      width: 90%;
      height: 90%;
}
</style>
</head>

<body>
<div align="center">
<canvas id="canvas"></canvas>
</div>
</body>

</html>

Untuk menampilkan gambar dan animasi pada canvas, anda memerlukan pemrograman javascript. Kode pemrograman javascript dapat diletakkan pada elemen head atau pada elemen body.


<script>
var c = document.getElementById('canvas');
var $ = c.getContext('2d');

</script>

Kode di atas merupakan bagian untuk mendeteksi canvas yang akan dijadikan tempat untuk bekerjanya seluruh kode dalam javascript. Sebagai pendahuluan, silakan melihat video dari idr corner.
Kode lengkap javascript yang akan menampilkan animasi piston sederhana ditulis seperti berikut:


<script type="text/javascript">
var c = document.getElementById('canvas');
var $ = c.getContext('2d');
var cW = c.width, cH = c.height;

var piston = new Image();
piston.src = 'animation-20_images-2.png';
var tabung = new Image();
tabung.src = 'animation-20_images-1.png';
var tab_dep = new Image();
tab_dep.src = 'animation-20_images-3.png';

var x=0, y=-100;
var bawah = true, atas = false;
var jalan = false;

function runAnimate() {
if (jalan) {
	return;
} else {
window.requestAnimationFrame(animasi);
jalan = true;
}
}

function stopAnimate() {
        jalan = false;
}

function animasi(time) {

   $.clearRect(0,0,cW,cH);
   $.drawImage(tabung,125,10,60,140);
   $.drawImage(tab_dep,125,15,60,135);
   $.drawImage(piston,125,y,60,140);
   
   if ( y < cH && bawah == true && atas == false ) { y+=1; }
   if (y==cH-142 && bawah == true && atas == false) {bawah = false; atas = true;}
   if (y < cH+1 && bawah == false && atas == true) { y-=1; }
   if (y==-99 && bawah == false && atas == true) {bawah = true; atas = false;}

   if (jalan) {
   window.requestAnimationFrame(animasi);
   }
   
}

</script>

Contoh animasi di atas dapat dilihat pada link animasi piston.

Leave a Reply

Your email address will not be published. Required fields are marked *