HTML canvas tag | belajar <canvas> element
Referensi Belajar HTML canvas tag. Tutorial dan panduan mengenai element <canvas>...</canvas>
yang digunakan untuk menggambar bitmap image dengan script. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <canvas>.
Deskripsi
Penjelasan HTML canvas
HTML element <canvas>
digunakan untuk menggambar grafik / bitmap secara interaktif menggunakan script (javascript). Contohnya, digunakan untuk menggambar grafik permainan, animasi, komposisi foto dan efek gambar visual lainnya.
<canvas> element hanya sebagai container (penampung) untuk gambar, sedangkan gambarnya dibuat oleh script secara terpisah.
Didalam element canvas
, dapat disisipkan teks apa saja sebagai fallback untuk browser yang tidak mendukung HTML canvas, teks ini akan muncul apabila browser tidak mendukung canvas
element.
HTML <canvas>
merupakan tag yang baru diperkenalkan pada HTML5.
Attributes
Atribut HTML Tag <canvas>
Digunakan untuk menentukkan tinggi dari element canvas yang dijadikan container (penampung) gambar.
Digunakan untuk menentukkan lebar dari element canvas yang dijadikan container (penampung) gambar.
Global Attributes
Atribut Secara Global (Keseluruhan)
<canvas> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<canvas> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <canvas>
element
<canvas id="kanvasGambar" height="200" width="300">
<!-- Teks ini muncul apabila browser tidak mendukung HTML5 canvas -->
<p>Browser Anda tidak mendukung HTML5 Canvas</p>
</canvas>
<script>
var kanvas = document.getElementById("kanvasGambar");
var konteks = kanvas.getContext("2d");
konteks.fillStyle = "rgb(255,0,0)";
konteks.fillRect(10,50,150,50);
konteks.fillStyle = "rgb(255,255,255)";
konteks.fillRect(10,100,150,50);
</script>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh HTML Canvas tag</title>
<style>
canvas {
background: #555;
}
</style>
</head>
<body>
<h3>Contoh HTML5 Canvas</h3>
<canvas id="kanvasGambar" height="200" width="300">
<!-- Teks ini muncul apabila browser tidak mendukung HTML5 canvas -->
<p>Browser Anda tidak mendukung HTML5 Canvas</p>
</canvas>
<script>
var kanvas = document.getElementById("kanvasGambar");
var konteks = kanvas.getContext("2d");
konteks.fillStyle = "rgb(255,0,0)";
konteks.fillRect(10,50,150,50);
konteks.fillStyle = "rgb(255,255,255)";
konteks.fillRect(10,100,150,50);
</script>
<p>
<strong>Keterangan:</strong> blok kotak hitam (diberi style CSS) adalah area kanvas yang merupakan HTML element <code>canvas</code>, sedangkan kotak merah-putih dibuat dengan script (javascript) yang berkaitan dengan HTML5 canvas (Canvas API).
</p>
</body>
</html>
SHARE