Panduan Canvas HTML

Element <canvas> HTML digunakan untuk menggambar grafik di halaman web.

Grafik di atas dibuat dengan <canvas>.

Ia menampilkan empat elemen: persegi merah, persegi terangkap, persegi berwarna, dan teks berwarna.

Apa itu HTML Canvas?

Elemen <canvas> HTML digunakan untuk menggambar grafik secara dinamis melalui skrip (biasanya JavaScript).

Elemen <canvas> hanya wadah grafik. Anda harus menggunakan skrip untuk menggambar grafik yang sebenarnya.

Canvas memiliki berbagai metode untuk menggambar jalur, kotak, lingkaran, teks, dan menambahkan gambar.

HTML Canvas dapat menggambar teks

Canvas dapat menggambar teks berwarna, dan dapat di-animasikan.

HTML Canvas dapat menggambar grafik

Canvas memiliki kemampuan kuat untuk mewakilkan data grafis dengan grafik dan grafik.

HTML Canvas dapat di-animasikan

Objek Canvas dapat bergerak. Semua halnya mungkin: dari bola loncat sederhana hingga animasi kompleks.

HTML Canvas dapat interaktif

Canvas dapat merespon peristiwa JavaScript。

Canvas dapat merespon setiap operasi pengguna (klik tombol, klik mouse, klik tombol, gerakan jari)

HTML Canvas dapat digunakan untuk permainan

Metode animasi Canvas memberikan banyak kemungkinan bagi aplikasi permainan HTML。

Contoh Canvas

Dalam HTML, elemen <canvas> terlihat seperti ini：

<canvas id="myCanvas" width="200" height="100"></canvas>

Elemen <canvas> harus memiliki atribut id, supaya JavaScript dapat merujuk kepadanya.

Atribut width dan height wajib untuk mendefinisikan ukuran kanvas.

Petunjuk: Dalam halaman HTML, dapat ada beberapa elemen <canvas>.

Secara default, elemen <canvas> tidak memiliki garis dan tidak ada kontennya.

Untuk menambahkan garis, gunakan atribut style：

Contoh

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Coba sendiri

Bagian berikutnya akan memperkenalkan bagaimana menggambar di atas kanvas。

Silakan lihat juga：

Panduan lengkap Canvas di CodeW3C.com

Dukungan peramban

<canvas> adalah standar HTML5 (2014)。

Seluruh peramban modern mendukung <canvas>：