closePath методу

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 методу,
фигураны берилген түскө боёйт