html5 Tutorial lukisan kanvas (6)—kaedah arcTo untuk melukis lengkung dalam kemahiran tutorial canvas_html5

Artikel sebelum ini bercakap tentang kaedah arka kanvas, dan artikel ini bercakap tentang kaedah arka yang berkaitan dengannya.
arka dan arcTo adalah serupa daripada nama mereka. arcTo juga merupakan kaedah melukis lengkung, dan lengkung yang dilukisnya juga merupakan lengkok bulatan sempurna. Tetapi parameternya tidak serasi dengan arka~
ctx.arcTo(x1,y1,x2,y2,radius); hanya parameter terakhir ialah jejari bulatan, menunjukkan bahawa arcTo mempunyai beberapa hubungan dengan bulatan.
Terdapat sedikit artikel tentang arcTo di Internet, dan akhirnya saya menemui satu dari negara asing dan tiada alat intuitif untuk lukisan kanvas, jadi saya hanya boleh bergantung pada meneka arcTo membuat saya meneka untuk masa yang lama . .
Untuk penerangan intuitif, saya menggunakan kaedah tambahan: di mana sahaja arcTo dilukis, saya juga menggunakan lineTo untuk melukis titik yang sepadan untuk melihat hubungan mereka. Hanya lukis garisan tambahan.

Salin kod

Kod tersebut adalah seperti berikut:

var x0=100,
y0 =400,
x1 = 500,
y1 = 400,
x2 = 450,
y2 = 450; x0,y0 );
ctx.strokeStyle = "#f00";
ctx.lineWidth = 2; ();
ctx.beginPath();
ctx.strokeStyle = "rgba(0,0,0,0.5)"; y0);
ctx.lineTo(x1,y1);
ctx.fillText('x1,y1',x1 10,y1 10)
ctx.lineTo(x2,y2); .fillText( 'x2,y2',x2 10,y2)
ctx.stroke();


Nampaknya seperti banyak kod, tetapi ia sebenarnya sangat mudah. Saya menggunakan beberapa pembolehubah untuk menyimpan nilai koordinat, dan selebihnya ialah operasi kanvas.
Keterangan pembolehubah: x0, y0 ialah koordinat titik permulaan, x1, y1 ialah koordinat titik pertama, x2, y2 ialah koordinat titik kedua. Garis lurus yang dilukis dengan lineTo ialah garis hitam lut sinar 1px dan garisan yang dilukis oleh arcTo ialah garis merah 2px.
Muat semula halaman dan anda akan melihat gambar di bawah.

Saya harus mengatakan bahawa garis merah ini kelihatan seperti cangkuk.
Kemudian peraturan arcTo ditemui, ia sebenarnya melalui titik permulaan, titik pertama, dan dua garis lurus pada titik kedua, membentuk sudut yang disertakan, dan kedua-dua garis ini juga adalah tangen kepada bulatan parameter.
Jejari bulatan menentukan di mana bulatan akan bertangen kepada garisan. Sama seperti bola yang bergolek ke titik buta, semakin kecil bola, semakin jauh ia bergolek dan lebih dekat dengan titik mati, sebaliknya berlaku untuk bola yang lebih besar.
Ini adalah isu akademik yang sangat serius, tolong jangan jadi YY.

Jom jadikan bola lebih besar!

Salin kod


Kod tersebut adalah seperti berikut:

ctx.arcTo(x1, y1,x2 ,y2,50); //Tukar jejari kepada 50

Seperti yang ditunjukkan dalam gambar, anda dapat melihat bahawa lengkok telah menjadi sangat besar dan tidak bertangen kepada garis lurus.
Sudah tentu, sebenarnya mereka masih tangen, kerana garis tangen memanjang tidak terhingga.

Kami terus meneroka, terus membuat bulatan lebih besar, dan memendekkan jarak antara titik permulaan dan titik pertama.

Salin kod


Kodnya adalah seperti berikut:

var x0=400; /Titik mula x Koordinat berubah daripada 100 kepada 400 ... ctx.arcTo(x1,y1,x2,y2,100); //Jejari bulatan meningkat kepada 100 dan kemudian anda akan melihat bentuk yang begitu pelik.

Ia pada asalnya cangkuk, tetapi kini ia dibengkokkan secara tiba-tiba, malah ke arah yang bertentangan! Ia agak seperti rak botol wain.
Walau bagaimanapun, sila ambil perhatian bahawa bulatan ini masih bertangen kepada dua garisan! Cuma sekarang panjang dua garisan itu tidak dapat memenuhi bulatan! Dia telah melanjutkan kedua-dua talian secara wayarles!
Bilakah pemegang cangkuk ini akan diterbalikkan? Jika anda mahir dalam geometri, anda boleh cuba memahami persamaan tangen antara titik dan bulatan.

Terdapat titik yang sangat penting dalam kaedah arcTo ini adalah (x1, y1) dalam kod selagi jaraknya ke titik tangen bulatan melebihi jaraknya ke titik permulaan (x0, y0 ), Pembalikan akan berlaku.
Kita dapat lihat dari gambar bahawa koordinat titik (x2, y2) boleh berubah secara infiniti Selagi ia sentiasa titik pada garis tangen, maka apabila jejari bulatan kekal tidak berubah, graf dilukis. oleh arcTo Tiada apa-apa yang akan berubah. Ini memerlukan perhatian khusus.

Izinkan saya menggunakan pengetahuan saya tentang geometri yang tidak terdapat pada jadual untuk mengesahkan cadangan ini. Untuk memudahkan pengiraan, saya mula-mula menukar sudut antara dua garisan kepada 90 darjah.

Salin kod


Kod tersebut adalah seperti berikut:

var x0=100,
y0=400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450; 🎜>
Selepas perubahan, ia dibuka pada 90 darjah! Kami memastikan jejari bola tetap. Selepas muat semula:

Kami menjadikan y2 lebih besar, iaitu memanjangkan garis tangen dan mengubahnya menjadi 550. Selepas menyegarkan:

Garis tangen dilanjutkan, tetapi garisan merah yang dilukis oleh arcTo tiada perubahan.