Panduan Canvas HTML

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

Grafik di atas dicipta dengan <canvas>.

Ia menunjukkan empat elemen: persegi merah, persegi dengan pelangi, persegi berwarna dan teks berwarna.

Apakah itu HTML Canvas?

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

Elemen <canvas> hanya wadah grafik. Anda mesti menggunakan skrip untuk menggambar grafik sebenar.

Canvas mempunyai banyak cara untuk menggambar laluan, kotak, bulatan, teks dan menambahkan imej.

Canvas HTML boleh menggambar teks

Canvas boleh menggambar teks berwarna dan boleh disertai dengan efek animasi.

Canvas HTML boleh menggambar grafik

Canvas mempunyai keupayaan kuat untuk mewakili data grafik menggunakan grafik dan diagram.

Canvas HTML boleh dianimasi

Objek Canvas boleh dipindahkan. Sesuatu yang mungkin: dari bola loncat yang sederhana hingga animasi yang kompleks.

Canvas HTML dapat interaktif

Canvas boleh berinteraksi dengan acara JavaScript。

Canvas boleh berinteraksi dengan sebarang operasi pengguna (klik tombol, klik tetikus, klik butang, gerakan jari).

Canvas HTML boleh digunakan untuk permainan

Method animasi Canvas memberikan banyak kemungkinan bagi aplikasi permainan HTML。

Contoh Canvas

Dalam HTML, elemen <canvas> kelihatan seperti ini：

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

Elemen <canvas> mesti mempunyai properti id, supaya JavaScript boleh merujuk kepadanya.

Properti width dan height adalah penting bagi menentukan saiz kanvas.

Petikan: Ada banyak elemen <canvas> yang boleh wujud di atas halaman HTML.

Secara lalai, elemen <canvas> tidak mempunyai garis dan tiada kandungan.

Untuk menambahkan garis, gunakan properti style：

Contoh

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

Coba sendiri

Bab selanjutnya akan memaparkan bagaimana cara menggambar di atas kanvas。

Lihat juga：

Panduan lengkap Canvas di CodeW3C.com

Pematuhan pelayar

<canvas> adalah standard HTML5 (2014)。

Semua pelayar web modern setakat ini menyokong <canvas>：