html5 Tutorial lukisan kanvas (5)—kaedah lengkok lukisan lengkung dalam kemahiran tutorial canvas

html5 Tutorial lukisan kanvas (5)—kaedah lengkok lukisan lengkung dalam kemahiran tutorial canvas_html5

WBOY

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

asal

1517 orang telah melayarinya

Dalam artikel ini Melukis Garisan di Kanvas, saya bercakap tentang cara melukis garis lurus Secara logiknya, artikel mengenai lukisan lengkung ini sepatutnya telah diterbitkan lama dahulu, tetapi memandangkan lukisan lengkung pada kanvas adalah agak istimewa, saya telah '. belum faham, jadi Cubalah langkah demi langkah.
Salah satu kesukaran untuk melukis lengkung dalam kanvas ialah hanya terdapat 4 fungsi untuk lengkung! Mereka ialah arc, arcTo, quadraticCurveTo, dan bezierCurveTo Mari saya mulakan dengan kaedah arka yang paling mudah.
Fungsi lengkok adalah untuk melukis lengkok biasa, yang boleh menjadi bulatan lengkap atau lengkok tertentu bulatan. Sintaks untuk arka adalah seperti berikut: 🎜>

context.arc(x, y, radius, startAngle, endAngle, lawan arah jam)
Saya akan menerangkan parameternya, iaitu,
arka(pusat bulatan x, pusat bulatan y, jejari, sudut permulaan, sudut berakhir, lawan jam atau tidak)

Apakah yang perlu kita lakukan jika kita menggunakan lengkok untuk melukis bulatan yang lengkap? Semua orang perasan bahawa terdapat sudut permulaan dan sudut akhir dalam parameter Jika sudut permulaan kita ialah 0 dan sudut akhir ialah 360, bukankah ia bulatan sempurna?

Jawapan yang betul! Tetapi harus diingat bahawa sudut di sini dinyatakan dalam "radian" (sama juga untuk Flash Bulatan lengkap ialah 360 darjah, iaitu radian 2PI). Jadi kami menulis seperti ini:

Salin kod

Kod adalah seperti berikut:

ctx.arc(400,400,20,0,Math.PI*2); >Seperti lineTo, arc juga merupakan laluan lukisan, jadi kita perlu memanggil kaedah isian atau lejang di belakangnya untuk memaparkan grafik (red strokeStyle dan translucent red fillStyle digunakan dalam gambar).

Sekarang mari kita lukis bulatan 1/4, sudutnya ialah 90 darjah. Seperti yang dinyatakan sebelum ini, sudut 360 darjah ialah 2PI radian, jadi sudut satu darjah ialah 2PI/360=PI/180 radian, kemudian 90 darjah ialah 2PI/360*90=PI/2 radian (sila hitung sudut lain sendiri ).

Salin kod

Kodnya adalah seperti berikut:

ctx.arc(400,400, 20,0 ,Math.PI*2/4);

Daripada rajah, kita boleh menentukan bahawa 0 darjah lengkok ialah 0 darjah yang biasa digunakan dalam matematik , tetapi sudut lalai kepada Jarum jam terbuka, yang bertentangan dengan model matematik (ia berkaitan dengan koordinat, kerana koordinat kanvas juga bertentangan dengan koordinat matematik).
Tetapi tidakkah terdapat parameter di hadapan untuk menentukan sama ada ia berlawanan arah jam? Bagaimana pula kita menetapkannya kepada benar?

Salin kod

Kod tersebut adalah seperti berikut:

ctx.arc(400,400, 20,0 ,Math.PI*2/4,true);

Anda akan melihat bahawa sudut menjadi lawan jam, menyebabkan lengkok menjadi 360 -90 = 270 darjah.
Tetapi! Satu perkara yang perlu diberi perhatian oleh semua orang ialah kaedah pengiraan titik permulaan dan titik akhir sentiasa bermula dari 0 darjah dan memanjang mengikut arah jam Tiada perkara seperti ke hadapan dan ke belakang. Arah jam dan lawan jam hanyalah arah di mana lengkok dilukis.

Ini bukan sahaja menghalang kekeliruan daripada berulang-alik, tetapi juga memudahkan pengiraan.

Walau bagaimanapun, menggunakan mengikut arah lawan jam secara fleksibel kadangkala boleh berguna. Dalam contoh di atas, sudut permulaan kami semuanya 0. Sekarang mari cuba sudut permulaan yang lain, seperti 90 darjah.

Salin kod

Kod adalah seperti berikut:

ctx.arc(400,400, 20,Math .PI*2/4,Math.PI*2 Math.PI);

Jika titik permulaan kita ialah 90 darjah dan titik akhir juga 90 darjah, hasilnya tiada apa-apa. boleh dilukis, jadi saya meletakkan titik akhir Sudut telah ditukar kepada 180 darjah, dan akhirnya graf di bawah diperolehi.

Soalan

: Jika kita melukis bulatan lengkap dari titik permulaan selain 0 darjah, bolehkah? Sudah tentu anda boleh, asalkan anda menetapkan titik akhir arka kepada sudut permulaan 360 darjah, seperti:

Salin kod

Kod Seperti berikut:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2 Math.PI*2/4); /Titik permulaan ialah 90 darjah, titik akhir ialah 360 90 Darjah

Bagaimanapun, pendekatan ini hanya mencari masalah, dan orang biasa tidak akan menggunakannya.
Ringkasan: Kaedah lengkok Kanvas ialah cara untuk melukis lengkok positif Ia hanya boleh melukis lengkok positif dan tidak boleh melukis lengkok pelik lain, seperti bentuk-S - walaupun saya paling suka S. -berbentuk.