Цртање правоаголници преку canvas во JavaScript

Квадратите и правоаголниците не е неопходно да се цртаат со помош на комбинации од moveTo, lineTo - за тоа постојат и поедноставни методи. Ајде да ги разгледаме.

Методот strokeRect

Методот strokeRect(x, y, ширина, висина) црта контура на правоаголник во зададената точка. Првите два параметри ги задаваат координатите на точката, во која ќе се наоѓа горниот лев агол на нацртаниот правоаголник.

Ајде да нацртаме правоаголник со помош на strokeRect (претпоставуваме дека ctx веќе постои):

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

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

ctx.strokeRect(50, 50, 100, 75);

Результат:

Методот fillRect

Методот fillRect(x, y, ширина, висина) работи на ист начин како и strokeRect, само што црта пополнет правоаголник. Да погледнеме на пример:

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

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

ctx.fillRect(50, 50, 100, 75);

Результат:

Методот rect

Следниот метод rect(x, y, ширина, висина) исто така црта правоаголник. Но овој правоаголник ќе стане видлив, само ако се примени методот stroke или fill. Во првиот случај ќе се добие контура, а во вториот - пополнетa форма.

Ајде да нацртаме контура со помош на rect:

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

Результат:

А сега да нацртаме пополнетa форма:

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

Результат:

Методот clearRect

Следниот метод clearRect(x, y, ширина, висина) работи како гума за бришење, чистејќи ја правоаголната област и правејќи ја содржината сосема провидна.

Ајде да нацртаме квадрат со помош на fillRect и да избришеме негов дел со помош на clearRect:

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

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

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: