Menggunakan laluan untuk melukis arka dalam teknik tutorial HTML5 Canvas

Menggunakan laluan untuk melukis arka dalam teknik tutorial HTML5 Canvas_html5

WBOY

Lepaskan： 2016-05-16 15:46:50

asal

1758 orang telah melayarinya

Artikel ini diterjemahkan daripada Steve Fulton & Jeff Fulton HTML5 Kanvas, Bab 2, “Kaedah Laluan Lanjutan, Arka”

Dalam lukisan Kanvas, "arka" boleh sama ada bulatan lengkap atau sebahagian daripada lilitan.

Salin kod

Kod adalah seperti berikut:

context.arc()
konteks .arka(x, y, jejari, mulaSudut, hujungSudut, lawan jam)

Dalam penerangan kaedah di atas, x dan y mentakrifkan pusat bulatan dan jejari mentakrifkan jejari bagi bulatan. startAngle dan endAngle dinyatakan sebagai nilai koordinat kutub. lawan jam (boolean) mentakrifkan arah lengkok.

Sebagai contoh, jika kita ingin melukis bulatan dengan titik (100, 100) sebagai pusat dan jejari 20, kita boleh menggunakan kod berikut:

Salin kod

Kod adalah seperti berikut:

context.arc(100, 100, 20, (Math.PI/180)* 0, (Math.PI/180) *360, palsu);

Kesan pelaksanaan ialah:

Perlu diingat bahawa dalam kod di atas, kita perlu menukar sudut permulaan (0) dan sudut penamat (360) kepada radian koordinat kutub dengan mendarab dengan (Math.PI/180). Apabila sudut permulaan ialah 0 dan sudut penamat ialah 360, anda mendapat bulatan penuh.

Selain bulatan penuh, kami juga boleh melukis segmen arka. Kod berikut melukis suku bulatan:

Salin kod

Kodnya adalah seperti berikut:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

Jika kita ingin melukis tiga perempat lagi bulatan sebagai tambahan kepada lengkok di atas, kita boleh menetapkan lawan jam kepada benar:

Salin kod

Kodnya adalah seperti berikut:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)* 90 , benar);

Terjemahan Nota 1: Dalam sistem koordinat Kanvas, arah paksi-Y adalah ke bawah.

Anotasi 2: Anda juga boleh melukis lengkok menggunakan kaedah context.arcTo(). Penerangan kaedah ini dalam buku Kanvas HTML5 asal oleh Steve Fulton & Jeff Fulton adalah salah sama sekali. Untuk ringkasan yang betul bagi arcTo(), lihat: arcTo of curve .