如何使用JavaScript平滑連接多個點？

使用 JavaScript 透過多個點繪製平滑曲線

在繪圖應用中，能夠平滑連接多個點至關重要。但是，使用本機 JavaScript 線條繪製函數（lineTo、quadraticCurveTo 和 bezierCurveTo）提供的方法有限，會導致扭結或不相交的曲線。本文探討了一種使用近似技術透過一系列點來建立平滑曲線的方法。

不相交曲線的問題

當對每對點使用單獨的「curveTo」函數時，所得曲線在端點處表現出不連續性。這是因為每個曲線段僅受其自身特定控制點的影響。

平滑度的近似

建議的解決方案包括將曲線連接到後續取樣點之間的中點。這會在端點處創造更多的連續性，因為一條曲線的端點成為下一條曲線的控制點。

繪製程式碼

要實現此近似，請按照以下步驟操作：

1. 使用 moveTo() 移到第一個點。
2. 迭代這些點，排除最後兩個。
3. 對於每個點對 (i, i 1)，計算中點 (xc, yc)。
4. 使用quadraticCurveTo() 繪製從目前點到中點的曲線，有效地過渡到從中點開始的新曲線。
5. 透過以下位置繪製曲線最後兩點使用quadraticCurveTo()。

程式碼範例

這裡是示範這種方法的程式碼片段：

<code class="javascript">const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const points = [
  { x: 50, y: 50 },
  { x: 180, y: 100 },
  { x: 75, y: 120 },
  { x: 40, y: 40 },
];

// Move to the first point
ctx.moveTo(points[0].x, points[0].y);

// Iterate through the remaining points
for (var i = 1; i < points.length - 2; i++) {
  // Calculate the midpoint
  var xc = (points[i].x + points[i + 1].x) / 2;
  var yc = (points[i].y + points[i + 1].y) / 2;
  // Draw a curve from the current point to the midpoint
  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
);

// Stroke the curve
ctx.stroke();</code>

此程式碼示範了平滑使用這種近似技術可以透過多個點繪製曲線。

以上是如何使用JavaScript平滑連接多個點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！