HTML5 : Canvas

Oleh : Reza Ervani

بسم الله الرحمن الرحيم

HTML5_Logo_512

Elemen Canvas

elemen Canvas HTML5 adalah tag HTML yang sama dengan tag <div><a>, atau <table>,  dengan pengecualian bahwa konten yang ada padanya dirender dengan JavaScript. Untuk membuat Canvas HTML5, kita perlu menempatkan tag canvas didalam dokumen HTML, mengakses canvas tersebut dengan JavaScript, membuat suatu context dan kemudian memanfaatkan API Canvas HTML5 untuk menggambar visualisasi.

Saat menggunakan canvas, adalah penting untuk memahami perbedaan antara elemen canvas dan konteks canvas, agar tidak membingungkan. Elemen canvas adalah node DOM aktual yang diembed ke halaman HTML. Sementara konteks canvas adalah sebauh objek dengan properti dan metode tertentu yang dapat digunakan untuk merender grafik didalam elemen canvas. Konteks dapat berupa 2d atau webgl (3d).

Setiap elemen canvas hanya dapat berisi satu konteks. Jika kita menggunakan metode getContext() berulang-ulang, maka ia akan menampilkan referensi ke konteks objek yang sama.

Berikut adalah contoh elemen <canvas> yang hanya memiliki dua atribut yakni lebar dan tinggi, serta atribut utama HTML5 seperti id, name dan class.

<canvas id="mycanvas" width="100" height="100"></canvas>

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
   border:1px solid red;
}
</style>
</head>
<body>
   <canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>

Lihat contohnya di : http://nl02.rumahilmu.or.id/contoh/html5/kotak.html

Rendering Context

var canvas  = document.getElementById("mycanvas");
if (canvas.getContext){
   var ctx = canvas.getContext('2d');
   // kode gambar letakkan disini
} else {
   // kode pemberitahuan browser tidak mendukung letakkan disini
}  

Contoh Penggunaannya di Kode HTML :

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape(){
  // Mengambil elemen canvas menggunakan DOM
  var canvas = document.getElementById('mycanvas');

  // Membuat agar kode tidak dieksekusi jika browser tidak mendukung
  if (canvas.getContext){

    // Menggunakan getContext untuk menggunakan canvas buat menggambar
    var ctx = canvas.getContext('2d');

    // Menggambar bentuk
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  } else {
    alert('Browser anda tidak mendukung.');
  }
}
</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

Beberapa properti canvas akan kita pelajari kemudian. (Lihat Daftar Isi)

Semoga bermanfaat (reza@rumahilmu.or.id)

 

About Reza Ervani
Adalah pendiri programming.rezaervani.com -

About Reza Ervani 381 Articles
Adalah pendiri programming.rezaervani.com -

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.