Oleh : Reza Ervani
بسم الله الرحمن الرحيم
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)
Leave a Reply