HTML5 Canvas で複数の点を通る滑らかな曲線を描くにはどうすればよいですか?

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

描画アプリケーションを作成する場合、マウスの動きをキャプチャして線分を使用して接続すると、次のような結果が得られることがよくあります。ギザギザの線。滑らかな曲線を実現するには、代替手法を検討する必要があります。

既存の描画関数

HTML5 Canvas には、点を接続するための 3 つの描画関数が用意されています。

• lineTo: 2 点を直線で結びます。
• quadraticCurveTo: 3 点を 2 次曲線で結びます。
• bezierCurveTo: 4 点を 3 次ベジェ曲線で結びます。

4 点ごとに bezierCurveTo を使用すると、各間隔で鋭いねじれが発生する可能性があります。

近似方法: 補間された中点

実際的な解決策は、「次のように曲線を描く」ことです。 " 3 つの連続するサンプル ポイントの中点を使用して、連続した滑らかな曲線を作成します。

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

このメソッドは、実際のサンプル ポイントの間の中点に位置する制御点を作成することで曲線を近似し、サンプル ポイントでのスムーズな移行を保証します。

注:

このメソッドは、すべてのサンプル ポイントを通る曲線を描画するわけではありませんが、目的の形状に非常に近い視覚的にシームレスな曲線を生成します。各ポイントを介して接続する代替方法は存在しますが、実装はより複雑です。

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