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
bağlam.closePath();
Örnek
İlk olarak, iki çizgi çizelim ve bunları
closePath ile kapatmayalım:
<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();
:
Örnek
Şimdi ise bu iki çizgiyi closePath ile bir şekil içinde kapatalım,
böylece bir üçgen elde edelim:
<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(); // çizgileri bir şekil içinde kapatıyoruz
ctx.stroke();
:
Örnek
Son çizgi yerine, şekli closePath ile kapatarak
bir kare çizelim:
<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(); // çizgileri bir şekil içinde kapatıyoruz
ctx.stroke();
:
Ayrıca Bakınız
-
metod
fill,
şekli belirtilen renkle doldurur
