HTML5 キャンバスで複数の点を通る滑らかな曲線を描く方法

JavaScript HTML5 Canvas で複数の点を使用して滑らかな曲線を描く方法

描画アプリケーションでは、アーティストは多くの場合、次のような滑らかな曲線を作成する必要があります。複数のポイントを経由して。 HTML5 キャンバスには lineTo、quadraticCurveTo、bezierCurveTo などの線描画関数が用意されていますが、これらを点のグループごとに順番に使用すると、曲線がバラバラになる可能性があります。この記事では、任意の数の点を通る滑らかな曲線を描画するためのソリューションを紹介します。

滑らかな遷移のための中点補間

滑らかな曲線を描画するための鍵は、次のような鋭角を避けることです。曲線が交わる。これは、隣接する点の中点間に曲線を描くことで実現できます。これにより、各曲線の終点が共通の制御点を共有するようになり、曲線間の移行がスムーズになります。

近似方法

次のコード スニペットは中点を示しています。補間メソッド:

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

このコードでは、最初の点に移動し、残りの点を反復処理します。各点について、現在の点と次の点の間の中点を計算し、この中点まで二次曲線を描きます。最後に、最後の 2 点間に二次曲線を描きます。

近似の利点

この方法は各点を正確に追跡するわけではありませんが、視覚的に滑らかな曲線を提供します。近似。ほとんどの描画アプリケーションでは、このレベルの精度で十分です。

詳細情報

すべての点を通過するより正確な方法については、次のリソースを参照してください: http ://www.cartogrammar.com/blog/actionscript-curves-update/.

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