Metode Canvas lineTo()
Definisi dan penggunaan
lineTo() Metode untuk menambahkan titik baru dan menciptakan jalur dari titik itu ke titik yang terakhir yang ditentukan di kanvas (metode ini tidak menciptakan jalur).
Petunjuk:Gunakan stroke() Metode ini digunakan untuk menggambar jalur yang tepat di atas kanvas.
Instans
Contoh 1
Mulai jalur, pindah ke posisi 0,0. Buat jalur ke posisi 300,150:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Petunjuk:Beberapa contoh lebih banyak disediakan di bawah halaman.
Sintaks
context.lineTo(x,y);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| x | Koordinat x tujuan jalur. |
| y | Koordinat y tujuan jalur. |
Lebih banyak contoh
Contoh 2
Menggambar jalur, bentuknya huruf L:
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.stroke();
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang 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>.
