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

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

Contoh

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

Результат:

Contoh

Dan sekarang mari lukis bentuk berisi:

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

Результат:

Lihat juga