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

NỘI DUNG BÀI VIẾT

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

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ểu	Mô tả
x	number	Tọa độ x tính từ góc trên bên trái của hình chữ nhật
y	number	Tọa độ y tính từ góc trên bên trái của hình chữ nhật
width	number	Chiều rộng (đơn vị tính bằng pixel) của hình chữ nhật
height	number	Chiề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ểu	Mô tả
x	number	Tọa độ x tính từ góc trên bên trái của hình chữ nhật
y	number	Tọa độ y tính từ góc trên bên trái của hình chữ nhật
width	number	Chiều rộng (đơn vị tính bằng pixel) của hình chữ nhật
height	number	Chiề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ểu	Mô tả
x	number	Tọa độ x tính từ góc trên bên trái của hình chữ nhật
y	number	Tọa độ y tính từ góc trên bên trái của hình chữ nhật
width	number	Chiều rộng (đơn vị tính bằng pixel) của hình chữ nhật
height	number	Chiề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.

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

Giới thiệu