Komentar: Kita dapat menggunakan "jalur" untuk menggambar grafik apa pun. Jalur ini hanyalah serangkaian titik dan garis yang menghubungkan titik -titik ini. Konteks kanvas apa pun hanya akan memiliki satu "jalur saat ini", dan ketika konteks.save () disebut, "jalur saat ini" tidak akan disimpan
asli:? P = 371
Artikel ini diterjemahkan dari Canvas Steve Fulton & Jeff Fulton HTML5, Bab 2, menggunakan jalur untuk membuat baris
Untuk kanvas HTML5, kita dapat menggunakan jalur untuk menggambar grafik apa pun. Jalur ini hanyalah serangkaian titik dan garis yang menghubungkan titik -titik ini. Konteks kanvas apa pun hanya akan memiliki satu jalur saat ini, dan ketika konteks.save () disebut, jalur saat ini tidak akan disimpan.
Awal dan akhir jalan
Memanggil BeginPath () dapat memulai jalan, sambil memanggil ClosePath () akan mengakhiri jalan. Jika Anda menghubungkan titik di jalur, maka koneksi ini membentuk subpath. Jika titik terakhir dalam subpath terhubung ke poin pertama, kami menganggap bahwa subpath ditutup.
Gambar garis
Operasi jalur paling dasar terdiri dari panggilan berulang ke perintah moveto () dan lineto (). Misalnya, contoh berikut:
function drawScreen () {
context.strokestyle = "hitam";
Context.linewidth = 10;
context.linecap = 'square';
context.beginpath ();
Context.moveto (20, 0);
Context.lineto (100, 0);
Context.stroke ();
context.closepath ();
}
Dalam contoh di atas, kami menggambarkan segmen garis horizontal dengan lebar 10 piksel; Pada saat yang sama, kami juga mengatur properti linecap dan strokestyle. Berikut adalah daftar beberapa properti yang umum digunakan:
linecap
Linecap mendefinisikan gaya di kedua ujung segmen garis di kanvas, dan dapat diatur ke salah satu dari tiga nilai berikut:
pantat. Nilai default; Tambahkan tepi lurus di kedua ujung segmen garis.
bulat. Tambahkan tutup garis setengah lingkaran di setiap ujung segmen garis. Diameter tutup garis sama dengan lebar segmen garis.
persegi. Tambahkan tutup garis persegi ke kedua ujung segmen garis. Panjang tutup garis sama dengan lebar segmen garis.
linejoin
LinJoin mendefinisikan pola sudut di persimpangan dua segmen garis. Berikut ini adalah tiga nilai opsional:
gelar uskup. Bawaan; menciptakan sudut yang tajam. Anda dapat membatasi panjang sudut tajam dengan mengatur properti MiteriLlimit - MitterLimit adalah rasio maksimum panjang sudut tajam dan lebar garis, dan standarnya adalah 10.
memiringkan. Buat bevel.
bulat. Buat sudut bulat.
linewidth
Linewidth mendefinisikan ketebalan garis, dan standarnya adalah 1.0.
Strokestyle
Strokestyle mendefinisikan gaya seperti warna yang digunakan untuk membuat garis.
Catatan Penerjemah: Ketika LinJoin diatur ke MITER, tetapi panjang sudut yang tajam melebihi batas MiteriLlimit, kanvas akan menampilkan efek sudut bevel.