Contoh menambahkan teg Kanvas pada HTML page_html5 petua tutorial

Dalam

pada halaman HTML, anda boleh menggunakan kod berikut untuk menambah teg 🎜>

Kodnya adalah seperti berikut:

Penyemak imbas anda tidak sokong Kanvas HTML5.

Nota Terjemahan: Untuk kanvas, tulisan berikut tidak dibenarkan:

Salin kod


Kod adalah seperti berikut:

Mari kita lihat apa yang dilakukan oleh kod di atas. Teg mempunyai tiga atribut utama, termasuk:

1.id. Kami boleh menggunakan nilai id untuk merujuk teg Dalam kod di atas, nilai id ialah canvasOne.

2.lebar. Lebar kanvas, dalam piksel. Dalam kod di atas, nilai lebar ialah 500 piksel.
3.tinggi. Ketinggian kanvas, dalam piksel. Dalam kod di atas, nilai ketinggian ialah 300 piksel.

Di antara teg permulaan dan teg akhir Di mana label terletak. Dalam kod di atas, kami menggunakan teks "Pelayar anda tidak menyokong Kanvas HTML5."
Gunakan objek dokumen untuk merujuk elemen kanvas dalam JavaScript

Apabila halaman HTML dimuatkan, objek dokumen merujuk kepada semua elemen dalam halaman, jadi kami boleh menggunakan DOM untuk merujuk kepada

Kami memerlukan rujukan kepada objek Canvas supaya kami tahu tempat untuk memaparkan lukisan menggunakan antara muka Kanvas.

Pertama, kami mentakrifkan pembolehubah bernama theCanvas untuk memegang rujukan kepada objek Canvas.

Kemudian, kami memanggil fungsi getElementById() bagi objek dokumen dan tetapkan parameter masuk kepada canvasOne (id teg dalam halaman HTML) untuk mendapatkan objek Canvas:

Salin kod

Kod adalah seperti berikut:

var theCanvas = document.getElementById("canvasOne");