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
konteks.closePath();
Contoh
Pertama, mari lukis dua garis tanpa menutupnya
melalui closePath:
<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();
:
Contoh
Sekarang mari tutup kedua-dua garis ini menjadi bentuk melalui
closePath, dengan itu mendapatkan segi tiga:
<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(); // menutup garis menjadi bentuk
ctx.stroke();
:
Contoh
Mari lukis segi empat, menggantikan garis terakhir
dengan menutup bentuk melalui closePath:
<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(); // menutup garis menjadi bentuk
ctx.stroke();
:
Lihat juga
-
kaedah
fill,
yang mengisi bentuk dengan warna yang ditentukan
