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

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)

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>

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)

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>

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)
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>

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.

CodeGym Full-stack

Leave a Reply

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