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
konteks.closePath();
Contoh
Pertama, mari gambar 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 garis ini menjadi sebuah bentuk melalui
closePath, sehingga mendapatkan segitiga:
<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 gambar kotak, alih-alih garis terakhir
tutup 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
-
metode
fill,
yang mengisi bentuk dengan warna tertentu
