Рисуване на правоъгълници чрез 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);

Результат: