HTML <canvas> elemen digunakan untuk menggambar grafik pada halaman web.
Grafik ke kiri dibuat dengan <canvas> . Ini menunjukkan empat unsur: persegi panjang merah, persegi panjang gradien, persegi panjang multicolor, dan teks multicolor.
Apa itu HTML Canvas?
HTML <canvas> elemen digunakan untuk menggambar grafik, dengan cepat, melalui scripting (usually JavaScript) .
The <canvas> elemen hanya wadah untuk grafis. Anda harus menggunakan script untuk benar-benar menarik grafis.
Kanvas memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan menambahkan gambar.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh <canvas> elemen.
| Elemen | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas Bisa Menggambar Teks
Kanvas bisa menggambar teks berwarna-warni, dengan atau tanpa animasi.
HTML Canvas Bisa Menggambar Grafik
Kanvas memiliki fitur yang besar untuk presentasi data grafis dengan citra dari grafik dan diagram.
HTML Canvas Bisa Animated
benda kanvas bisa bergerak. Segalanya mungkin: dari bola memantul sederhana untuk animasi kompleks.
HTML Canvas Bisa Interaktif
Kanvas dapat menanggapi peristiwa JavaScript.
Kanvas dapat merespon aksi pengguna (klik tombol, klik mouse, klik tombol, gerakan jari).
HTML Canvas Bisa Digunakan di Game
metode kanvas 'untuk animasi, menawarkan banyak kemungkinan untuk aplikasi game HTML.
kanvas Contoh
Dalam HTML, sebuah <canvas> elemen terlihat seperti ini:
<canvas id="myCanvas" width="200" height="100"></canvas>The <canvas> elemen harus memiliki atribut id sehingga dapat disebut oleh JavaScript.
Lebar dan tinggi atribut yang diperlukan untuk menentukan ukuran kanvas.
Tip: Anda dapat memiliki beberapa <canvas> elemen pada satu halaman HTML.
Secara default, <canvas> elemen memiliki perbatasan dan tidak ada konten.
Untuk menambahkan perbatasan, menggunakan atribut style:
Contoh
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Cobalah sendiri " Bab-bab berikutnya menunjukkan cara menggambar di kanvas.