closePath Metodu

closePath metodu, lineTo metodu kullanılarak çizilen şekli otomatik olarak kapatır, bu sırada bitiş noktasından başlangıç noktasına düz bir çizgi çizer. Eğer şekil zaten kapatılmışsa veya sadece bir noktaysa, bu metod hiçbir şey yapmaz.

Sözdizimi

javascriptbağlam.closePath();

Örnek

İlk olarak, iki çizgi çizelim ve bunları closePath ile kapatmayalım:

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

Результат:

Örnek

Şimdi ise bu iki çizgiyi closePath ile bir şekil içinde kapatalım, böylece bir üçgen elde edelim:

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(); // çizgileri bir şekil içinde kapatıyoruz
ctx.stroke();

Результат:

Örnek

Son çizgi yerine, şekli closePath ile kapatarak bir kare çizelim:

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(); // çizgileri bir şekil içinde kapatıyoruz
ctx.stroke();

Результат:

Ayrıca Bakınız