Kaedah closePath

Kaedah closePath secara automatik menutup bentuk yang dilukis menggunakan kaedah lineTo, sambil melukis garis lurus dari titik akhir ke titik awal. Jika bentuk sudah ditutup atau hanya berupa titik, maka kaedah ini tidak melakukan apa-apa.

Sintaks

javascriptkonteks.closePath();

Contoh

Pertama, mari lukis dua garis tanpa menutupnya melalui 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();

Результат:

Contoh

Sekarang mari tutup kedua-dua garis ini menjadi bentuk melalui closePath, dengan itu mendapatkan segi tiga:

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(); // menutup garis menjadi bentuk
ctx.stroke();

Результат:

Contoh

Mari lukis segi empat, menggantikan garis terakhir dengan menutup bentuk melalui 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(); // menutup garis menjadi bentuk
ctx.stroke();

Результат:

Lihat juga