SVG 'S'贝塞尔曲线到数学公式

Question

我有以下 SVG 路径：

M 0, 100  S 27, 2, 200 0

。

我正在尝试使用here中的贝塞尔方程将路径转换为数学公式。

当我尝试时，我注意到蓝线（使用 SVG 路径字符串）与红线（使用数学公式绘制）不太匹配。

我做错了什么吗，比如没有正确理解如何从 SVG 路径中提取控制点？

let c = document.getElementById('c')
let ctx = c.getContext('2d')

ctx.strokeStyle = 'blue'
ctx.stroke(new Path2D(`M 0, 100  S 27, 2, 200 0`))

// bezier control points, derived from SVG path
let x1 = 0,    y1 = 100,
    x2 = 27,   y2 = 2,
    x3 = 200,  y3 = 0

ctx.strokeStyle = 'red'
ctx.beginPath()
ctx.moveTo(x1, y1)

for(let t=0; t<=1; t+=0.0001) {
  ctx.lineTo(
    (1-t)**2 * x1 + 2*(1-t) * t * x2 + t**2 * x3,
    (1-t)**2 * y1 + 2*(1-t) * t * y2 + t**2 * y3
  )
}
ctx.stroke()

<canvas id="c" width="200" height="100"></canvas>

Answer 1

“S”路径命令将绘制三次贝塞尔曲线，但您的代码似乎正在绘制二次曲线。如果我正确地阅读了 SVG 规范（这是一个很大的“如果”，这里还不到早上 7 点...），我认为您需要重复 (0, 100) 点来获得四个点，然后从这些生成三次曲线。