Metode Canvas closePath()

Definisi dan penggunaan

closePath() metode untuk menciptakan jalur dari titik saat ini ke titik awal.

Pemberitahuan:Gunakan stroke() metode untuk menggambar jalur yang tepat di kanvas.

Pemberitahuan:Gunakan fill() Gunakan metode untuk mengisi gambar (default adalah hitam). Gunakan fillStyle Atribut untuk mengisi warna lain/gradient.

Contoh

Contoh 1

Gambar jalur, bentuknya huruf L, kemudian gambar garis kembali ke titik awal:

Browser Anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

Coba sendiri

Pemberitahuan:Lebih banyak contoh disediakan di bawah halaman.

Sintaks

context.closePath();

Beberapa contoh lainnya

Contoh 2

Gunakan biru sebagai warna pengisi:

Browser Anda tidak mendukung tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.