Metod closePath

Metod closePath avtomatik olaraq lineTo metodu ilə çəkilmiş fiquru bağlayır, bu zaman son nöqtədən başlanğıc nöqtəyə düz xətt çəkir. Əgər fiqur artıq bağlanmışdırsa ya da sadəcə nöqtədirsə, metod heç nə etmir.

Sintaksis

javascriptkontekst.closePath();

Nümunə

Əvvəlcə closePath ilə bağlamadan iki xətt çəkək:

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

Результат:

Nümunə

İndi isə bu iki xətti closePath ilə fiqurda bağlayaq və üçbucaq əldə edək:

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(); // xətləri fiqurda bağlayırıq
ctx.stroke();

Результат:

Nümunə

Gəlin kvadrat çəkək, son xətt əvəzinə fiquru closePath ilə bağlayaq:

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(); // xətləri fiqurda bağlayırıq
ctx.stroke();

Результат:

Həmçinin bax