Bagaimana untuk Melukis Lengkung Licin dalam Kanvas dengan Berbilang Mata?

Cara Melukis Lengkung Licin dengan Berbilang Mata dalam JavaScript dan Kanvas HTML5

Isu:

Mencipta lengkung licin dalam aplikasi lukisan dengan menggabungkan titik sampel dengan fungsi "curveTo" mengakibatkan kekusutan akibat titik kawalan terputus.

Penyelesaian:

Untuk melukis lengkung licin melalui N titik, pendekatan alternatif ialah "melengkung ke" titik tengah antara titik berikutnya.

Kod:

<code class="javascript">// Move to the first point
ctx.moveTo(points[0].x, points[0].y);

// Iterate through points
for (var i = 1; i < points.length - 2; i++) {
  // Calculate midpoint
  var xc = (points[i].x + points[i + 1].x) / 2;
  var yc = (points[i].y + points[i + 1].y) / 2;

  // Create quadratic curves to midpoints
  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>

Penjelasan:

Kaedah ini menghampiri lengkung licin dengan mencantumkan lengkung di titik tengah titik bersebelahan. Setiap lengkung terputus berkongsi titik akhir tetapi dipengaruhi oleh titik kawalan sepunya, menghasilkan peralihan yang lancar pada titik bersilang.

Nota:

Walaupun pendekatan ini tidak melalui setiap titik sampel seperti yang dinyatakan pada asalnya dalam tajuk soalan, ia menghasilkan lengkung halus yang tidak dapat dibezakan secara visual yang mencukupi untuk kebanyakan aplikasi lukisan.

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