HTML5 Canvas - Vẽ hình chữ nhật



Có ba phương thức để vẽ các hình chữ nhật trên canvas:

STTPhương thức và Miêu tả
1

fillRect(x,y,width,height)

Phương thức này vẽ một hình chữ nhật được fill.

2

strokeRect(x,y,width,height)

Phương thức này vẽ một outline hình chữ nhật

3

clearRect(x,y,width,height)

Phương thức này xóa khu vực đã xác định và làm nó hoàn toàn trong suốt

Ở đây x và y xác định vị trí trên canvas (liên quan tới điểm gốc) của góc trên cùng bên trái của hình chữ nhật và widthheight là độ rộng và chiều cao của hình chữ nhật.

Ví dụ

Sau đây là một ví dụ đơn giản mà sử dụng các phương thức trên để vẽ một hình chữ nhật đẹp.


   
	
      
		
   
	
   
      
   
	

Nó sẽ vẽ hình chữ nhật sau:

Canvas Rectangle
canvas_trong_html5.jsp