Canvas HTML5

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 perekaan jalur, persegi, lingkaran, karakter, serta menambahkan gambar.

Membuat Elemen Canvas

Menambahkan 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 perekaan. Semua pekerjaan perekaan harus dilakukan 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, segi, lingkaran, karakter serta menambahkan gambar.

Dua baris kode di bawah ini menggambar segi empat merah:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

Metode fillStyle mengewarnai dengan merah, metode fillRect menentukan bentuk, posisi dan ukuran.

Memahami Koordinat

Metode fillRect di atas memiliki parameter (0,0,150,75).

Artinya: Gambar segi empat 150x75 di kanvas, dimulai dari kanan atas (0,0).

Seperti yang terlihat di bawah ini, koordinat X dan Y kanvas digunakan untuk menentukan lokasi pengerian di kanvas.

Contoh Instance Canvas: Memahami Koordinat

Contoh: Tampilkan koordinat saat menggeser mouse ke segi empat

Beberapa Contoh Canvas

Berikut adalah contoh lebih banyak pengerian di elemen canvas:

Contoh - Garis

Menggambar garis melalui penentuan dimana mulai dan dimana berakhir:

Contoh Instance Canvas: 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>

Coba Sendiri

Contoh - Lingkaran

Menggambar lingkaran melalui pengaturan ukuran, warna dan posisi:

Contoh Instance Canvas: 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>

Coba Sendiri

Contoh - Gradasi

Gunakan warna yang anda tentukan untuk menggambar latar belakang gradasi:

Contoh Instance Canvas: Gradien

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>

Coba Sendiri

Contoh - Gambar

Letakkan gambar ke atas kanvas:

Contoh Instance Canvas: Gambar

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>

Coba Sendiri

Tutorial HTML Canvas

Untuk belajar lebih banyak tentang kanvas, kunjungi situs kami Tutorial HTML Canvas.

Halaman yang Berhubungan

Panduan Referensi:Tag <canvas> HTML 5

Panduan Referensi:Objek Canvas DOM HTML