Artikel sebelumnya berbicara tentang metode ARC Canvas, dan artikel ini berbicara tentang metode ARCTO yang terkait dengannya.
Arc dan Arcto dapat dilihat dari nama -nama mereka. Arcto juga merupakan metode kurva menggambar, dan kurva yang ditariknya juga merupakan busur dari lingkaran yang sempurna. Tapi parameter dan busurnya tidak relevan ~
ctx.arcto (x1, y1, x2, y2, radius); Parameter ARCTO mencakup dua titik, dan tidak ada titik yang mewakili pusat lingkaran di dua titik ini. Hanya parameter terakhir adalah jari -jari lingkaran, yang menunjukkan bahwa arcto dan lingkaran memiliki sedikit hubungan.
Ada sangat sedikit artikel tentang Arcto Online, dan saya akhirnya menemukan yang asing; Dan tidak ada alat intuitif untuk menggambar kanvas, jadi saya hanya bisa menebak, Arcto membuat saya menebak untuk waktu yang lama. .
Untuk deskripsi yang intuitif, saya mengambil metode tambahan: di mana pun arcto ditarik, saya menggunakan lineto untuk menggambar titik yang sesuai untuk melihat hubungan mereka. Gambarkan saja jalur tambahan.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 450,
y2 = 450;
ctx.beginpath ();
ctx.moveto (x0, y0);
ctx.strokestyle = "#f00";
ctx.linewidth = 2;
ctx.arcto (x1, y1, x2, y2,20);
ctx.stroke ();
ctx.beginpath ();
ctx.strokestyle = "rgba (0,0,0,0,5)";
ctx.linewidth = 1;
ctx.moveto (x0, y0);
ctx.lineto (x1, y1);
ctx.filltext ('x1, y1', x1+10, y1+10)
ctx.lineto (x2, y2);
ctx.filltext ('x2, y2', x2+10, y2)
ctx.stroke ();
Tampaknya ada banyak kode, tetapi sebenarnya sangat sederhana. Saya menggunakan beberapa variabel untuk menyimpan nilai koordinat, dan sisanya adalah operasi kanvas.
Deskripsi Variabel: X0, Y0 adalah koordinat titik awal, x1, y1 adalah koordinat titik pertama, dan x2, y2 adalah koordinat titik kedua. Garis lurus yang ditarik oleh Lineto adalah garis hitam 1px tembus cahaya, dan garis yang ditarik oleh Arcto adalah garis merah 2px.
Segarkan halaman dan Anda akan melihat gambar di bawah ini.
Saya harus mengatakan bahwa garis merah ini terlihat seperti kait.
Jadi hukum Arcto ditemukan. Ini sebenarnya membentuk sudut melalui dua garis lurus pada titik awal, titik 1 dan titik 2, dan kedua garis ini juga merupakan garis singgung dari lingkaran parameter.
Jari -jari lingkaran menentukan di mana lingkaran akan membelah tepi dengan garis. Ini seperti bola yang berguling ke sudut mati. Semakin kecil bola, semakin banyak gulungan, semakin dekat ke sudut mati; Semakin besar bola, sebaliknya adalah benar.
Ini adalah masalah akademis yang sangat serius, jadi tidak ingin Anda.
Mari kita buat bola lebih besar!
ctx.arcto (x1, y1, x2, y2,50); // jari -jari diubah menjadi 50
Seperti yang ditunjukkan pada gambar, Anda dapat melihat bahwa busur telah menjadi besar dan bahkan tidak bersinggungan dengan garis lurus.
Tentu saja, mereka sebenarnya masih bersinggungan karena garis singgung diperpanjang tanpa batas.
Kami terus mengeksplorasi, terus menumbuhkan lingkaran, dan mempersingkat jarak antara titik awal dan titik pertama.
var x0 = 400; // titik awal koordinat perubahan dari 100 menjadi 400
...
ctx.arcto (x1, y1, x2, y2.100); // Jari -jari lingkaran menjadi lebih besar hingga 100 dan Anda akan melihat sosok yang aneh.
Awalnya itu adalah pengait, tetapi sekarang telah ditekuk dan beralih ke arah yang berlawanan! Agak seperti pemegang botol anggur.
Namun, harap dicatat bahwa lingkaran ini masih bersinggungan dengan dua baris! Tapi sekarang panjang dua garis tidak dapat memenuhi lingkaran ini! Dia telah memperluas kedua kabel secara nirkabel!
Kapan pegangan kait ini akan dibalik? Jika Anda memiliki geometri yang baik, Anda dapat mencoba memahami persamaan titik tangen dari titik dan lingkaran.
Ada poin yang sangat penting dalam metode ARCTO. Poin penting ini adalah (x1, y1) dalam kode. Selama jarak dari itu ke titik singgung lingkaran melebihi jarak dari itu ke titik awal (x0, y0), itu akan berbalik.
Dari gambar kita dapat melihat bahwa koordinat titik ini (x2, y2) dapat berubah tanpa batas. Selama selalu titik pada garis singgung, maka grafik yang ditarik oleh Arcto tidak akan berubah sama sekali ketika jari -jari lingkaran tetap tidak berubah. Ini membutuhkan perhatian khusus.
Izinkan saya menggunakan pengetahuan geometris saya yang tidak dapat saya dapatkan di meja untuk memverifikasi proposisi ini. Demi perhitungan, saya pertama kali mengubah sudut antara dua garis menjadi 90 derajat.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;
Setelah perubahan, itu akan dibuka 90 derajat! Kami menjaga jari -jari bola tidak berubah. Setelah menyegarkan:
Kami membuat Y2 lebih besar, yaitu, memperpanjang garis singgung, mengubahnya menjadi 550, dan menyegarkan:
Garis tangen diperpanjang, tetapi garis merah yang ditarik oleh Arcto tidak berubah sama sekali.