Kaedah rect

Kaedah rect melukis segi empat tepat pada titik yang ditentukan. Segi empat tepat ini akan kelihatan hanya jika kaedah stroke atau fill digunakan. Dalam kes pertama, kontur akan dilukis, dan dalam kes kedua - bentuk berisi.

Sintaks

konteks.rect(x, y, lebar, tinggi)

Contoh

Mari lukis kontur menggunakan 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();

Contoh

Dan sekarang mari lukis bentuk berisi:

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

Lihat juga

kaedah fillRect,
yang melukis segi empat tepat berisi
kaedah strokeRect,
yang melukis kontur segi empat tepat