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