Рысаванне прамавугольнікаў праз 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);
:
