Цртање правоаголници преку 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.
Во првиот случај ќе се добие контура, а во вториот
- пополнетa форма.
Ајде да нацртаме контура со помош на 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();
:
А сега да нацртаме пополнетa форма:
<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);
:
