Kanvas HTML5 - Contoh penggunaan laluan untuk melukis kemahiran tutorial lines_html5

Teks asal:
http://www.lifelaf.com/blog/?p=371
Artikel ini diterjemahkan daripada Steve Fulton & Jeff Fulton HTML5 Canvas, Bab 2, “Using Paths untuk Mencipta Garisan ”

Untuk Kanvas HTML5, kami boleh menggunakan “laluan” untuk melukis sebarang grafik. Laluan hanyalah satu siri titik dan garis yang menghubungkan titik-titik ini. Sebarang konteks Kanvas hanya akan mempunyai satu "laluan semasa", dan apabila context.save() dipanggil, "laluan semasa" tidak akan disimpan.

Permulaan dan penghujung laluan

Panggil beginPath() untuk memulakan laluan dan memanggil closePath() akan menamatkan laluan. Jika anda menyambungkan titik dalam laluan, sambungan membentuk "subpath." Kami menganggap "subpath" sebagai "ditutup" jika titik terakhir dalam "subpath" disambungkan ke titik pertamanya sendiri.

Lukisan garisan

Operasi laluan paling asas terdiri daripada memanggil berulang kali perintah moveTo() dan lineTo(). Contohnya, contoh berikut:

Salin kod

Kodnya adalah seperti berikut:

fungsi drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square'; context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke(); 🎜> dalam contoh di atas, kami melukis segmen garisan mendatar dengan lebar 10 piksel pada masa yang sama, kami juga menetapkan sifat lineCap dan strokeStyle. Berikut ialah senarai beberapa atribut yang biasa digunakan:

lineCap
lineCap mentakrifkan gaya kedua-dua hujung segmen garisan dalam Kanvas dan boleh ditetapkan kepada salah satu daripada tiga nilai berikut:

punggung. Lalai; menambah tepi lurus pada kedua-dua hujung segmen garisan.

bulat. Tambahkan penutup dawai separuh bulatan pada setiap hujung segmen wayar. Diameter penutup wayar adalah sama dengan lebar segmen wayar.
segi empat. Tambahkan penutup dawai segi empat sama pada kedua-dua hujung segmen wayar. Panjang sisi penutup wayar adalah sama dengan lebar segmen garisan.
lineJoin
lineJoin mentakrifkan gaya sudut di persimpangan dua segmen garisan. Berikut ialah tiga nilai pilihan:

miter. Lalai; mencipta sudut tajam. Anda boleh mengehadkan panjang cusp dengan menetapkan atribut miterLimit - miterLimit ialah nilai maksimum nisbah panjang cusp kepada lebar garis, dan lalai ialah 10.
serong. Buat serong.
bulat. Buat sudut bulat.
lineWidth
lineWidth mentakrifkan ketebalan garisan, lalai ialah 1.0.

strokeStyle
strokeStyle mentakrifkan warna dan gaya lain yang digunakan untuk menghasilkan garisan.


Nota Terjemahan:
Apabila lineJoin ditetapkan kepada miter, tetapi panjang sudut tajam melebihi had miterLimit, Kanvas akan memaparkan kesan sudut "serong".