Vẽ hình chữ nhật trong Canvas

Vẽ hình chữ nhật trong Canvas

Giới thiệu

Trong bài viết này, mình sẽ hướng dẫn các bạn cách vẽ hình chữ nhật trong Canvas một cách đơn giản nhất.

Để vẽ được hình chữ nhật, chúng ta phải xác định tọa độ x và y (tính từ góc trên bên trái) và chiều dài, chiều rộng của hình chữ nhật. Ta sử dụng kết hợp 3 phương thức:

  • fillRect()
  • strokeRect()
  • clearRect()
Ve hinh chu nhat trong Canvas 1

Vẽ hình chữ nhật trong Canvas

Phương thức fillRect()

Phương thức fillRect() sử dụng để vẽ một hình chữ nhật đã được tô màu. Mặc định, màu được tô sẽ là màu đen.

Cú pháp:

ctx.fillRect(x, y, width, height)
Code language: CSS (css)

Mẹo: Thuộc tính fillStyle dùng để thiết lập màu, dải màu hoặc mẫu họa tiết sử dụng để đổ lên hình.

Tham sốKiểuMô tả
xnumberTọa độ x tính từ góc trên bên trái của hình chữ nhật
ynumberTọa độ y tính từ góc trên bên trái của hình chữ nhật
widthnumberChiều rộng (đơn vị tính bằng pixel) của hình chữ nhật
heightnumberChiều dài (đơn vị tính bằng pixel) của hình chữ nhật

Lưu ý: Nếu tham số chiều rộng hoặc chiều dài bằng 0, phương thức này không có hiệu lực.

Ví dụ:

<!DOCTYPE html> <html> <head> <title>Rectangle example</title> </head> <body> <canvas id="DemoCanvas" width="500" height="600"></canvas> <script> var canvas = document.getElementById("DemoCanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle='#fa4b2a'; // color of fill ctx.fillRect(10, 40, 140, 160); // create rectangle } </script> </body> </html>
Code language: HTML, XML (xml)

Phương thức strokeRect() 

Phương thức strokeRect() dùng để vẽ một hình chữ nhật (không tô màu). Mặc định viền sẽ là màu đen.

Cú pháp:

ctx.strokeRect(x, y, width, height)
Code language: CSS (css)

Mẹo: Sử dụng thuộc tính strokeStyle để thiết lập màu, dải màu hoặc mẫu họa tiết cho đường viền.

Tham sốKiểuMô tả
xnumberTọa độ x tính từ góc trên bên trái của hình chữ nhật
ynumberTọa độ y tính từ góc trên bên trái của hình chữ nhật
widthnumberChiều rộng (đơn vị tính bằng pixel) của hình chữ nhật
heightnumberChiều dài (đơn vị tính bằng pixel) của hình chữ nhật

Ví dụ:

<!DOCTYPE html> <html> <head> <title>Rectangle example</title> </head> <body> <canvas id="DemoCanvas" width="500" height="600"></canvas> <script> var canvas = document.getElementById("DemoCanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.lineWidth = "3"; ctx.strokeStyle = "red"; ctx.strokeRect(5, 5, 300, 250); ctx.lineWidth = "25"; ctx.lineJoin = "bevel"; ctx.strokeStyle = "blue"; ctx.strokeRect(150, 200, 300, 150); ctx.lineJoin = "round"; ctx.lineWidth = "45"; ctx.strokeStyle = "green"; ctx.strokeRect(250, 50, 150, 250); } </script> </body> </html>
Code language: HTML, XML (xml)

Phương thức clearRect()

Phương thức clearRect() dùng để xóa toàn bộ pixels nằm trong hình chữ nhật.

Cú pháp:

ctx.clearRect(x, y, width, height)
Code language: CSS (css)
Tham sốKiểuMô tả
xnumberTọa độ x tính từ góc trên bên trái của hình chữ nhật
ynumberTọa độ y tính từ góc trên bên trái của hình chữ nhật
widthnumberChiều rộng (đơn vị tính bằng pixel) của hình chữ nhật
heightnumberChiều dài (đơn vị tính bằng pixel) của hình chữ nhật

Ví dụ:

<!DOCTYPE html> <html> <head> <title>Rectangle example</title> </head> <body> <canvas id="DemoCanvas" width="500" height="600"></canvas> <script> var canvas = document.getElementById("DemoCanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle='green'; // color of fill var y=40, h=300, w=260; for (var x = 10; x!=140; x=x+10) { ctx.fillRect(x, y, h, w); ctx.clearRect(x+5, y+5, h-10, w-10); y=y+10; h=h-20; w=w-20; } } </script> </body> </html>
Code language: HTML, XML (xml)

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Leave a Reply

Your email address will not be published. Required fields are marked *