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