Phương thức rect

Phương thức rect vẽ một hình chữ nhật tại điểm đã cho. Hình chữ nhật này sẽ chỉ hiển thị nếu áp dụng phương thức stroke hoặc fill. Trường hợp đầu sẽ là đường viền, trường hợp thứ hai - là hình được tô đầy.

Cú pháp

context.rect(x, y, width, height)

Ví dụ

Hãy vẽ một đường viền bằng rect:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Ví dụ

Và bây giờ hãy vẽ một hình được tô đầy:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();

Xem thêm

phương thức fillRect,
vẽ một hình chữ nhật được tô đầy
phương thức strokeRect,
vẽ đường viền của hình chữ nhật