Bagaimana untuk Melukis Lengkung Licin Melalui Berbilang Mata dalam Kanvas HTML5?

Cara Melukis Lengkung Licin Menggunakan Berbilang Titik dalam Javascript HTML5 Kanvas

Dalam aplikasi lukisan, artis selalunya perlu mencipta lengkung licin yang melepasi melalui beberapa titik. Walaupun kanvas HTML5 menyediakan fungsi lukisan garisan seperti lineTo, quadraticCurveTo dan bezierCurveTo, menggunakannya dalam urutan untuk setiap kumpulan mata boleh menyebabkan lengkung terputus-putus. Artikel ini membentangkan penyelesaian untuk melukis lengkung licin melalui sebarang bilangan titik.

Interpolasi Titik Tengah untuk Peralihan Lancar

Kunci untuk melukis lengkung licin adalah untuk mengelakkan sudut tajam di mana lengkung bertemu. Ini boleh dicapai dengan melukis lengkung antara titik tengah titik bersebelahan. Ini memastikan bahawa titik akhir setiap lengkung berkongsi titik kawalan yang sama, menghasilkan peralihan yang lancar antara lengkung.

Kaedah Anggaran

Coretan kod berikut menunjukkan titik tengah kaedah interpolasi:

<code class="js">// 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>

Dalam kod ini, kita beralih ke titik pertama, kemudian melelang melalui titik yang tinggal. Untuk setiap titik, kami mengira titik tengah antara titik semasa dan titik seterusnya, dan melukis lengkung kuadratik ke titik tengah ini. Akhir sekali, kami melukis lengkung kuadratik antara dua titik terakhir.

Kelebihan Penghampiran

Walaupun kaedah ini tidak betul-betul mengikut setiap titik, ia memberikan visual yang lancar penghampiran. Untuk kebanyakan aplikasi lukisan, tahap ketepatan ini adalah mencukupi.

Bacaan Lanjut

Untuk kaedah yang lebih tepat yang melalui setiap titik, rujuk sumber berikut: http ://www.cartogrammar.com/blog/actionscript-curves-update/.

Atas ialah kandungan terperinci Bagaimana untuk Melukis Lengkung Licin Melalui Berbilang Mata dalam Kanvas HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!