HTML5 melukis bentuk kompleks dalam kanvas dengan tangkapan skrin kemahiran tutorial effects_html5

1. Lukiskan bentuk atau laluan yang kompleks

Apabila segi empat tepat tidak dapat memenuhi keperluan, persekitaran lukisan menyediakan kaedah berikut untuk melukis bentuk atau laluan yang kompleks.

beginPath(): Mula melukis laluan baharu.
closePath(): Menutup bentuk dengan melukis segmen garisan dari titik semasa ke titik permulaan laluan.
fill(), stroke(): Isi bentuk atau lukis bentuk lompang.
moveTo(): ​​​​Pindahkan titik semasa ke titik (x, y).
lineTo(): ​​​​Lukis garis lurus dari titik semasa ke titik (x, y).
arka(x,y,r,sAngle,eAngle,lawan arah jam): Lukis lengkok dengan jejari tertentu ke titik (x,y).

2. Untuk melukis bentuk kompleks menggunakan kaedah ini, anda perlu mengikuti langkah berikut

Gunakan kaedah beginPath() untuk mula melukis laluan.
Gunakan moveTo(), lineTo(), arc(), kaedah untuk mencipta segmen baris.
Gunakan closePath() untuk menamatkan lukisan dan menutup bentuk (pilihan).
Gunakan lejang() atau isi() untuk melukis sempadan luar atau mengisi bentuk laluan. Menggunakan fill() akan menutup semua laluan yang tidak ditutup secara automatik.

3. Arahan lukisan Arka()


4 Melukis bentuk kompleks dalam kanvas

Salin kod

Kod tersebut adalah seperti berikut:

= utf-8">