Bagaimanakah saya boleh melukis lengkung licin melalui berbilang titik dalam Kanvas HTML5?

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:

• lineTo: Menyambung dua titik dengan garis lurus.
• quadraticCurveTo: Menyambung tiga titik dengan lengkung kuadratik.
• bezierCurveTo: Menyambung empat titik dengan lengkung Bézier kubik.

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!