Grafik Kanvas HTML
Elemen HTML <canvas>digunakan untuk menggambar grafik pada halaman web.
Grafik di sebelah kiri dibuat dengan <canvas>. Ini menunjukkan empat elemen: persegi panjang merah, persegi panjang gradien, persegi panjang multiwarna, dan teks multiwarna.
Apa itu Kanvas HTML?
Elemen HTML <canvas>digunakan untuk menggambar grafik, dengan cepat, melalui JavaScript.
Elemen <canvas>ini hanya wadah untuk grafik. Anda harus menggunakan JavaScript untuk benar-benar menggambar grafik.
Kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, teks, dan menambahkan gambar.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung
<canvas>elemen tersebut.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Contoh Kanvas
Kanvas adalah area persegi panjang pada halaman HTML. Secara default, kanvas tidak memiliki batas dan tidak ada konten.
Markupnya terlihat seperti ini:
<canvas id="myCanvas" width="200" height="100"></canvas>
Catatan: Selalu tentukan idatribut (untuk dirujuk dalam skrip), dan a widthdan heightatribut untuk menentukan ukuran kanvas. Untuk menambahkan batas, gunakan styleatribut.
Berikut adalah contoh kanvas dasar yang kosong:
Contoh
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Tambahkan JavaScript
Setelah membuat area kanvas persegi panjang, Anda harus menambahkan JavaScript untuk menggambar.
Berikut beberapa contohnya:
Menarik garis
Contoh
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Menggambar lingkaran
Contoh
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Menggambar Teks
Contoh
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Stroke Teks
Contoh
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Menggambar Gradien Linier
Contoh
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Menggambar Gradien Melingkar
Contoh
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Gambar Gambar
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
Tutorial Kanvas HTML
Untuk mempelajari lebih lanjut tentang <canvas>, silakan baca Tutorial Kanvas HTML kami .