Цртање правоугаоника преко canvas у JavaScript-у
Квадрате и правоугаонике није неопходно
цртати помоћу комбинација moveTo,
lineTo - за то постоје и једноставније методе.
Хајде да их размотримо.
Метода strokeRect
Метода strokeRect(x, y, ширина,
висина) црта контур правоугаоника на задатој позицији.
Прва два параметра одређују
координате тачке у којој ће се налазити горњи
леви угао нацртаног правоугаоника.
Хајде да нацртамо правоугаоник помоћу
strokeRect (под претпоставком да ctx
већ постоји):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Метода fillRect
Метода fillRect(x, y, ширина, висина)
ради на исти начин као и strokeRect,
али црта попуњени правоугаоник.
Погледајмо на примеру:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Метода rect
Следећа метода rect(x, y, ширина,
висина) такође црта правоугаоник. Али
овај правоугаоник ће постати видљив тек
кад се примени метода stroke или fill.
У првом случају биће контур, а у другом
- попуњена фигура.
Хајде да нацртамо контур помоћу rect:
<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();
:
А сада хајде да нацртамо попуњену фигуру:
<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();
:
Метода clearRect
Следећа метода clearRect(x, y,
ширина, висина) делује као гумица,
бришући правоугаону област и чинећи
садржај потпуно транспарентним.
Хајде да нацртамо квадрат помоћу fillRect
и обришемо његов део помоћу clearRect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
