HTML5 Melukis segi empat tepat dalam kanvas dengan kemahiran tutorial renderings_html5

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