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

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

Ví dụ

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

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

javascriptlet 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:

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

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

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

Результат:

Xem thêm