Metode closePath

Metode closePath secara otomatis menutup bentuk yang digambar dengan metode lineTo, dengan menggambar garis lurus dari titik akhir ke titik awal. Jika bentuk sudah ditutup atau hanya berupa titik, maka metode tidak melakukan apa-apa.

Sintaks

javascriptkonteks.closePath();

Contoh

Pertama, mari gambar 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 garis ini menjadi sebuah bentuk melalui closePath, sehingga mendapatkan segitiga:

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 gambar kotak, alih-alih garis terakhir tutup 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