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.

[code language=”html”]
<canvas id="mycanvas" width="100" height="100"></canvas>

[/code]

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

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

Rendering Context

[code language=”html”]
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
}

[/code]

Contoh Penggunaannya di Kode HTML :

[code language=”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>
[/code]

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

Semoga bermanfaat (reza@rumahilmu.or.id)

 

About Reza Ervani 425 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.