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 әдісі,
ол фигураны берілген түспен бояйды