closePath методу

closePath методу, lineTo методу менен чизилген фигураны автоматтык түрдө жаап, акыркы чекиттен баштапкы чекитине чейин түз сызык тартат. Эгерде фигура мурунтан эле жабылып калган болсо же жөнөкөй чекит болсо, анда метод эч нерсе кылбайт.

Синтаксис

javascriptконтекст.closePath();

Мисал

Башында, аларды closePath аркылуу жабалбай, эки сызыкты тарталы:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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 аркылуу фигурага жаап, үч бурчтук алалы:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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 аркылуу жаап, чарчы тарталы:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Ошондой эле караңыз