Рысаванне прамавугольнікаў праз 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. У першым выпадку будзе контур, а ў другім - фігура.

Давайце нарысуем контур з дапамогай 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();

Результат:

А цяпер нарысуем фігуру:

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

Результат: