Melukis Lengkung Licin Melalui Berbilang Titik dalam Kanvas HTML5
Apabila membuat aplikasi lukisan, menangkap pergerakan tetikus dan menyambungkannya menggunakan segmen garisan selalunya menghasilkan garisan bergerigi. Untuk mencapai lengkung yang licin, anda perlu meneroka teknik alternatif.
Fungsi Lukisan Sedia Ada
HTML5 Canvas menyediakan tiga fungsi lukisan untuk menyambung titik:
Menggunakan bezierCurveTo untuk setiap empat titik boleh menyebabkan kekusutan tajam pada setiap selang.
Kaedah Anggaran: Titik Tengah Berinterpolasi
Penyelesaian praktikal ialah "melengkung ke " titik tengah tiga titik sampel berturut-turut, mewujudkan lengkung licin yang berterusan:
<code class="javascript">// move to the first point ctx.moveTo(points[0].x, points[0].y); for (var i = 1; i < points.length - 2; i++) { var xc = (points[i].x + points[i + 1].x) / 2; var yc = (points[i].y + points[i + 1].y) / 2; 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);</code>
Kaedah ini menghampiri lengkung dengan mencipta titik kawalan yang terletak di titik tengah antara titik sampel sebenar, memastikan peralihan yang lancar pada titik penamat.
Nota:
Kaedah ini tidak melukis lengkung melalui setiap titik sampel, tetapi ia menghasilkan lengkungan yang lancar secara visual yang hampir sama dengan bentuk yang dikehendaki. Kaedah alternatif yang menyambung melalui setiap titik wujud tetapi lebih kompleks untuk dilaksanakan.
Atas ialah kandungan terperinci Bagaimanakah saya boleh melukis lengkung licin melalui berbilang titik dalam Kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!