Canvas HTML5
- Halaman Sebelumnya Atribut Formulir Input HTML
- Halaman Berikutnya HTML5 SVG
Elemen canvas digunakan untuk menggambar grafik di halaman web.
Apa itu Canvas?
Elemen canvas HTML5 menggunakan JavaScript untuk menggambar gambar di halaman web.
Kanvas adalah area persegi, Anda dapat mengendalikan setiap pixelnya.
Canvas memiliki berbagai metode penggambar jalur, persegi, lingkaran, karakter, serta menambahkan gambar.
Buat elemen Canvas
Tambahkan elemen canvas ke halaman HTML5.
Tentukan id elemen, lebar, dan tinggi:
<canvas id="myCanvas" width="200" height="100"></canvas>
Menggambar melalui JavaScript
Elemen canvas sendiri tidak memiliki kemampuan menggambar. Semua kerja penggambar harus diselesaikan di dalam JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript menggunakan id untuk mencari elemen canvas:
var c=document.getElementById("myCanvas");
Lalu, buat objek konteks:
var cxt=c.getContext("2d");
Objek getContext("2d") adalah objek HTML5 bawaan, yang memiliki berbagai metode untuk menggambar jalur, persegi, lingkaran, karakter, dan menambahkan gambar.
Baris kode berikut ini menggambar sebuah persegi panjang merah:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Metode fillStyle mengecatkannya merah, metode fillRect menentukan bentuk, posisi, dan ukuran.
Memahami Koordinat
Metode fillRect di atas memiliki parameter (0,0,150,75).
Artinya: Gambar persegi panjang 150x75 di kanvas, dimulai dari kiri atas (0,0).
Seperti yang terlihat di bawah ini, koordinat X dan Y kanvas digunakan untuk menentukan lokasi pengerubahan di kanvas.
Contoh: Taruh kursor di atas persegi panjang untuk melihat koordinat
Beberapa Contoh Canvas
Berikut adalah beberapa contoh pengegamian di elemen canvas:
Contoh - Garis
Dengan menentukan dimana dimulai dan dimana berakhir, dapat menggambar sebuah garis:
Kode JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Elemen canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Peramban Anda tidak mendukung elemen canvas. </canvas>
Contoh - Lingkaran
Dengan menentukan ukuran, warna, dan posisi, dapat menggambar sebuah lingkaran:
Kode JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Elemen canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Peramban Anda tidak mendukung elemen canvas. </canvas>
Contoh - Gradasi
Gunakan warna yang Anda tentukan untuk menggambar latar belakang gradasi:
Kode JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Elemen canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Peramban Anda tidak mendukung elemen canvas. </canvas>
Contoh - Gambar
Letakkan gambar ke atas kanvas:
Kode JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Elemen canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Peramban Anda tidak mendukung tag HTML5 canvas. </canvas>
Panduan HTML Canvas
Untuk belajar tentang canvas lebih lanjut, kunjungi situs kami Panduan HTML Canvas.
- Halaman Sebelumnya Atribut Formulir Input HTML
- Halaman Berikutnya HTML5 SVG
