Метод closePath автоматически замыкает
фигуру, нарисованную с помощью метода lineTo,
рисуя при этом прямую линию из конечной точки
в начальную. Если фигура была уже закрыта
или является просто точкой, то метод ничего
не делает.
Синтаксис
контекст.closePath()
Пример
Для начала нарисуем две линии, не замыкая
их через closePath:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Пример
А теперь замкнем эти две линии в фигуру через
closePath, получив тем самым треугольник:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // замыкаем линии в фигуру
ctx.stroke();
:
Пример
Давайте нарисуем квадратик, вместо последней
линии замкнув фигуру через closePath:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // замыкаем линии в фигуру
ctx.stroke();
:
Смотрите также
-
метод
fill,
который закрашивает фигуру заданным цветом