在浏览器画布上绘制hermite曲线（javascript）

我试图在画布浏览器上绘制隐士曲线。 Hermite曲线由2个点和2个导数定义

Point1X = 71
Point1Y = 165
Deriv1X = -12
Deriv1Y = 2
Point2X = 210
Point2Y = 153
Deriv2X = 108
Deriv2Y = 0

我只能在画布上画贝塞尔曲线。有没有什么方法可以把埃尔米特曲线的点和导数转换成贝塞尔曲线，这样我就可以在画布上画出来

是否有其他选项可以在浏览器上绘制hermite曲线

---

谢谢你的帮助

Canvas2d不支持任意Hermite样条曲线，但它支持三次Bezier曲线，而且由于三次Bezier是二阶Hermite曲线，我们可以在数据和Bezier曲线之间自由转换

在这个问题上可以找到这样做的数学，特别是对于这个问题，我们可以将Hermite点的顺序[p1，d1，p2，d2]转换为：

Hermite points [p1,d1,p2,d2] = Bezier [p1, (p1 + d1/(2*t)), (p2 - d2/(2*t)), p2]

请注意，

t

值是曲线张力，并控制每个点的曲率顺序（张力越高，曲线上靠近曲线点的曲率变化率越高），在这种情况下仅为

1

（如果没有张力值，您的四个坐标实际上定义了平面上的沙漏六边形区域，而不是一条曲线，因为方向向量不能保证是真切线；而仅仅是表示行进方向的向量。这些值定义的区域以线{start，end}为边界。）在一侧，边界沿起点和终点的行进方向无限延伸）

因此，您可以使用Canvas2d API在画布上绘制任何Hermite曲线，用于三次Bezier曲线：

// Hermite data
var p1 = ..., d1 = ..., p2 = ..., d2 = ...;
var cmpoints = [p1.x, p1.y, d1.x, d1.y, p2.x, p2.y, d2.x, d2.y];

// Bezier data
var tension = 1;
var tensionFactor = 2 * tension;
var bpoints = [
  p1.x,
  p1.y,
  p1.x + d1.x/tensionFactor,
  p1.y + d1.y/tensionFactor,
  p2.x - d2.x/tensionFactor,
  p2.y - d2.y/tensionFactor,
  p2.x,
  p2.y
]

// Draw code (where we assume you already
// have your canvas context as "ctx")
ctx.beginPath();
ctx.moveTo.apply(bpoints.slice(0,2));
ctx.bezierCurveTo.apply(bpoints.slice(2);
ctx.stroke();

三次Hermite曲线（由C（0）、C’（0）、C（1）和C’（1）定义）和三次Bezier曲线（由P0、P1、P2和P3定义）可以通过以下方式相互关联

C（0）=P0，
C（1）=P3，
C'（0）=3（P1-P0），
C'（1）=3（P3-P2）

因此，您可以找到如下控制点：

P0=C（0），
P1=（1/3）*C'（0）+P0，
P2=P3-（1/3）*C'（1），
P3=C（1）

请提供一个您尝试的例子，这样我们就可以尝试解决您的问题，并解释您自己的尝试失败的原因-这样您就可以学到一些对您未来发展有用的东西，以及对这个问题的答案。这可能会给您一些启示。是一个带有张力的Catmull Rom实现（也称为基数样条线）。