De rect methode

De methode rect tekent een rechthoek op een bepaald punt. Deze rechthoek wordt alleen zichtbaar als je de methode stroke of fill toepast. In het eerste geval krijg je een omtrek, en in het tweede - een gevulde vorm.

Syntaxis

javascriptcontext.rect(x, y, breedte, hoogte)

Voorbeeld

Laten we een omtrek tekenen met 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();

Результат:

Voorbeeld

En laten we nu een gevulde vorm tekenen:

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

Результат:

Zie ook