Rumah >hujung hadapan web >Tutorial H5 >HTML5 Melukis segi empat tepat dalam kanvas dengan kemahiran tutorial renderings_html5
HTML5 Melukis segi empat tepat dalam kanvas dengan kemahiran tutorial renderings_html5
- WBOYasal
- 2016-05-16 15:47:291548semak imbas
1. Lukiskan segi empat tepat
Kanvas menggunakan sistem koordinat dengan asalan (0,0) di penjuru kiri sebelah atas dan koordinat y meningkat ke bawah.
Gunakan fungsi lukisan segi empat tepat persekitaran lukisan untuk melukis segi empat tepat.
fillRect(x,y,width,height): Lukis segi empat tepat pepejal.
strokeRect(x,y,width,height): Lukiskan segi empat tepat berongga.
clearRect(x,y,width,height): Kosongkan kawasan segi empat tepat yang ditentukan untuk menjadikannya lutsinar sepenuhnya.
2. Lukiskan segi empat tepat dalam kanvas
Kanvas menggunakan sistem koordinat dengan asalan (0,0) di penjuru kiri sebelah atas dan koordinat y meningkat ke bawah.
Gunakan fungsi lukisan segi empat tepat persekitaran lukisan untuk melukis segi empat tepat.
fillRect(x,y,width,height): Lukis segi empat tepat pepejal.
strokeRect(x,y,width,height): Lukiskan segi empat tepat berongga.
clearRect(x,y,width,height): Kosongkan kawasan segi empat tepat yang ditentukan untuk menjadikannya lutsinar sepenuhnya.
2. Lukiskan segi empat tepat dalam kanvas
Salin kod
Kodnya adalah seperti berikut :