Rumah >hujung hadapan web >tutorial js >Bagaimanakah Anda Boleh Menyambung Berbilang Titik Dengan Lancar Menggunakan JavaScript?
Dalam aplikasi lukisan, adalah penting untuk dapat menyambungkan berbilang titik dengan lancar. Walau bagaimanapun, menggunakan fungsi lukisan garisan JavaScript asli (lineTo, quadraticCurveTo, dan bezierCurveTo) menyediakan pendekatan terhad, mengakibatkan kekusutan atau lengkung terputus. Artikel ini meneroka kaedah untuk mencipta lengkung licin melalui satu siri titik menggunakan teknik penghampiran.
Apabila menggunakan fungsi "curveTo" yang berasingan untuk setiap pasangan mata, lengkung yang terhasil mempamerkan ketakselanjaran pada titik akhir. Ini kerana setiap segmen lengkung hanya dipengaruhi oleh titik kawalannya sendiri.
Penyelesaian yang dicadangkan melibatkan penyambungan lengkung ke titik tengah antara titik sampel berikutnya. Ini mewujudkan lebih banyak kesinambungan pada titik akhir, kerana titik akhir satu lengkung menjadi titik kawalan untuk yang seterusnya.
Untuk melaksanakan anggaran ini, ikut langkah berikut:
Berikut ialah coretan kod yang menunjukkan pendekatan ini:
<code class="javascript">const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const points = [ { x: 50, y: 50 }, { x: 180, y: 100 }, { x: 75, y: 120 }, { x: 40, y: 40 }, ]; // Move to the first point ctx.moveTo(points[0].x, points[0].y); // Iterate through the remaining points for (var i = 1; i < points.length - 2; i++) { // Calculate the midpoint var xc = (points[i].x + points[i + 1].x) / 2; var yc = (points[i].y + points[i + 1].y) / 2; // Draw a curve from the current point to the midpoint ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc); } // Curve through the last two points ctx.quadraticCurveTo( points[i].x, points[i].y, points[i + 1].x, points[i + 1].y ); // Stroke the curve ctx.stroke();</code>
Kod ini menunjukkan kelancaran lengkung yang boleh dilukis melalui berbilang titik menggunakan teknik penghampiran ini.
Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menyambung Berbilang Titik Dengan Lancar Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!