Artikel ini terutama memperkenalkan contoh -contoh menggambar persegi panjang di kanvas HTML5. Artikel ini menggunakan tiga API: Fillrect, Strokerect, dan ClearRect. Teman yang membutuhkannya bisa merujuknya.
Artikel ini diterjemahkan dari Steve Fulton & Jeff Fulton HTML5 Canvas, Bab 2, bentuk persegi panjang dasar.
Mari kita lihat bentuk geometris sederhana yang dibangun di kanvas - menggambar persegi panjang. Di kanvas, ada tiga cara untuk menggambar persegi panjang: fillrect, stroke (Strokerect), dan ClearRect. Tentu saja, kita juga dapat menggunakan jalur untuk menggambarkan semua angka termasuk persegi panjang.
Berikut API untuk tiga metode di atas:
1.fillrect (x, y, lebar, tinggi). Gambarlah persegi panjang yang solid mulai dari (x, y), lebar dan tinggi.
2.Strokerect (x, y, lebar, tinggi). Gambarlah kotak persegi panjang mulai dari (x, y), lebar dan tinggi. Kotak persegi panjang akan diterjemahkan ke dalam gaya yang berbeda sesuai dengan strokestyle set saat ini, linewidth, linejoin dan properti miterlimit.
3.Clearrect (x, y, lebar, tinggi). Bersihkan area persegi panjang mulai dari (x, y), lebar dan tinggi, membuatnya benar -benar transparan.
Sebelum memanggil metode di atas untuk menggambar kanvas, kita perlu mengatur gaya isian dan stroke. Cara paling mendasar untuk mengatur gaya ini adalah dengan menggunakan warna 24-bit (dilambangkan dalam string heksadesimal). Berikut adalah contoh sederhana:
Salin kode