如何使用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中文网其他相关文章！