Tutorial Kanvas HTML

Elemen HTML <canvas> digunakan untuk menggambar grafik pada halaman web.

Grafik di atas 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 skrip (biasanya JavaScript).

Elemen <canvas> hanyalah wadah untuk grafik. Anda harus menggunakan skrip untuk benar-benar menggambar grafik.

Kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, teks, dan menambahkan gambar.

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung elemen <canvas>.

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

Kanvas dapat menggambar teks berwarna, dengan atau tanpa animasi.

Kanvas memiliki fitur hebat untuk presentasi data grafis dengan citra grafik dan bagan.

Objek kanvas bisa bergerak. Semuanya mungkin: dari bola memantul sederhana hingga animasi kompleks.

Canvas dapat merespons event JavaScript.

Kanvas dapat merespons tindakan pengguna apa pun (klik tombol, klik mouse, klik tombol, gerakan jari).

Metode kanvas untuk animasi, menawarkan banyak kemungkinan untuk aplikasi game HTML.

Dalam HTML, elemen <canvas> terlihat seperti ini:

Elemen <canvas> harus memiliki atribut id agar dapat dirujuk oleh JavaScript.

Atribut lebar dan tinggi diperlukan untuk menentukan ukuran kanvas.

Tip: Anda dapat memiliki beberapa elemen <canvas> pada satu halaman HTML.

Secara default, elemen <canvas> tidak memiliki batas dan tidak ada konten.

Untuk menambahkan batas, gunakan atribut gaya:

Bab-bab berikutnya menunjukkan cara menggambar di atas kanvas.