複数の点を使用してキャンバスに滑らかな曲線を描くにはどうすればよいですか?

JavaScript および HTML5 Canvas で複数の点を含む滑らかな曲線を描く方法

問題:

「curveTo」関数でサンプル ポイントを結合して描画アプリケーションで滑らかな曲線を作成すると、制御点が切り離されてねじれが発生します。

解決策:

滑らかな曲線を描くにはN 点を通過する場合、別のアプローチは、後続の点の間の中点に「カーブ」することです。

コード:

<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>

説明:

この方法は、隣接する点の中点で曲線を結合することにより、滑らかな曲線を近似します。ばらばらの各曲線は端点を共有しますが、共通の制御点の影響を受けるため、交差する点でスムーズな遷移が得られます。

注:

ただし、このアプローチではすべての曲線が描画されるわけではありません。質問のタイトルで最初に述べたように、サンプル ポイントは、ほとんどの描画アプリケーションに十分な、視覚的に区別できない滑らかな曲線を生成します。

以上が複数の点を使用してキャンバスに滑らかな曲線を描くにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。