Hình chữ nhật Canvas HTML
Hình chữ nhật Canvas HTML
Ba phương pháp được sử dụng nhiều nhất để vẽ hình chữ nhật trong canvas là:
- Phương thức
rect()
- Phương thức
fillRect()
- Phương thức
strokeRect()
Phương thức orth()
Phương thức rect()
định nghĩa một hình chữ nhật.
Phương thức rect()
có các tham số sau:
Parameter | Description |
---|---|
x | The x-coordinate of the upper-left corner of the rectangle |
y | The y-coordinate of the upper-left corner of the rectangle |
width | The width of the rectangle, in pixels |
height | The height of the rectangle, in pixels |
Ví dụ
Sử dụng rect()
để xác định hình chữ nhật 150*100 pixel, bắt đầu ở vị trí (10,10). Sau đó sử dụng stroke()
để vẽ hình chữ nhật:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rect(10,10, 150,100);
ctx.stroke();
</script>
Hãy tự mình thử » Lưu ý rằng phương thức rect()
không vẽ hình chữ nhật (nó chỉ định nghĩa nó). Vì vậy, ngoài ra, bạn phải sử dụng phương thức stroke()
(hoặc phương thức fill()
) để thực sự vẽ nó.
Phương thức fillRect()
Phương thức fillRect()
vẽ một hình chữ nhật được tô màu.
Phương thức fillRect()
có các tham số sau:
Parameter | Description |
---|---|
x | The x-coordinate of the upper-left corner of the rectangle |
y | The y-coordinate of the upper-left corner of the rectangle |
width | The width of the rectangle, in pixels |
height | The height of the rectangle, in pixels |
Màu tô được chỉ định bằng thuộc tính fillStyle
. Nếu thuộc tính fillStyle
không được đặt thì màu tô mặc định là màu đen.
Ví dụ
Sử dụng fillRect()
để vẽ hình chữ nhật có kích thước 150*100 pixel, bắt đầu ở vị trí (10,10):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(10,10, 150,100);
</script>
Hãy tự mình thử »Ví dụ
Đặt màu tô bằng thuộc tính fillStyle
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink";
ctx.fillRect(10,10, 150,100);
</script>
Hãy tự mình thử » Phương thức StrokeRect()
Phương thức strokeRect()
vẽ một hình chữ nhật có nét (có viền).
Phương thức strokeRect()
có các tham số sau:
Parameter | Description |
---|---|
x | The x-coordinate of the upper-left corner of the rectangle |
y | The y-coordinate of the upper-left corner of the rectangle |
width | The width of the rectangle, in pixels |
height | The height of the rectangle, in pixels |
Màu nét được chỉ định bằng thuộc tính strokeStyle
. Nếu thuộc tính strokeStyle
không được đặt thì màu nét mặc định là màu đen.
Ví dụ
Sử dụng strokeRect()
để vẽ hình chữ nhật có nét 150*100 pixel, bắt đầu ở vị trí (10,10):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(10,10, 150,100);
</script>
Hãy tự mình thử »Ví dụ
Đặt màu của đường viền bằng thuộc tính strokeStyle
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.strokeRect(10,10, 150,100);
</script>
Hãy tự mình thử »Thêm ví dụ
Ví dụ
Tạo ba hình chữ nhật bằng phương thức rect()
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// Green rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();
</script>
Hãy tự mình thử »Ví dụ
Thu được kết quả tương tự như trên, với ít mã hơn, sử dụng phương thức strokeRect()
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Red rectangle
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.strokeRect(5, 5, 290, 140);
// Green rectangle
ctx.lineWidth =
"4";
ctx.strokeStyle = "green";
ctx.strokeRect(30, 30, 50, 50);
// Blue rectangle
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.strokeRect(50, 50, 150, 80);
</script>
Hãy tự mình thử »