Phương pháp HTML canvas rect()
Định nghĩa và cách sử dụng
rect() Phương pháp này tạo hình vuông.
Lưu ý:Vui lòng sử dụng stroke() hoặc fill() Phương pháp này vẽ hình vuông thực sự trên canvas.
Thực tế
Ví dụ 1
Vẽ hình vuông 150*100 pixel:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
Cú pháp
context.rect(x,y,width,height);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| x | Tọa độ x của góc trên cùng bên trái của hình vuông. |
| y | Tọa độ y của góc trên cùng bên trái của hình vuông. |
| width | Chiều rộng của hình vuông, tính bằng pixel. |
| height | Chiều cao của hình vuông, tính bằng pixel. |
Th thêm ví dụ
Ví dụ 2
Tạo ba hình vuông bằng phương pháp rect():
JavaScript:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// màu đỏ
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// Hình vuông màu xanh lá cây
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// Hình vuông màu xanh
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
