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

Susan Sarandon
Lepaskan: 2024-10-31 07:19:01
asal
433 orang telah melayarinya

How can I draw smooth curves through multiple points in HTML5 Canvas?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan