Javascript 绘制数学函数而不渲染人工制品

我不认为有一个好的答案，但我想知道是否有更好的方法来做到这一点

我需要画一个数学函数，它在显示器的一端几乎是平的，在另一端几乎是垂直的。圆的左下象限是一个很好的模型。我可以根据需要自动生成任意多个点

问题是，没有各种各样的手工艺品，我无法做到这一点

我还没有试过贝塞尔拟合；我不认为这会很接近。我的理解是，贝塞尔是一次过手动构建的漂亮图形，而不是真正的曲线拟合

这将留下多段线。对于多段线，我只能做两件事-我可以选择线长度（换句话说，我自动生成的点的数量），我可以禁用抗锯齿（setAttributeNS（null，“图形渲染”，“清晰边”）

如果我生成了很多点，那么到处都是锯齿，结果是不可用的。它看起来也很像是振荡的，这使得我似乎错误地计算了函数。抗锯齿没有任何区别，因为它不会跨点边界运行

我唯一的解决办法就是画更少的点，这样我就可以明显地画线段了。它不再平滑，但至少没有锯齿或振荡。我用默认的抗锯齿来画

有什么想法吗

编辑：

---

似乎唯一的答案实际上是贝塞尔曲线拟合。你必须进行预处理，找到所需线段的参数，然后绘制结果。谷歌推出了许多关于贝塞尔曲线拟合的热门产品。

你拥有数学函数，因此可以根据需要生成任意多的点

我假设问题在于，因为您不知道输出分辨率（SVG与设备无关），所以您不知道要生成多少个点。否则，您可以创建一条多段线，其中每条线约为1像素长

将你的数学函数拟合到一条贝塞尔曲线（可能）不会得到完美的匹配——就像一个圆不能被一条三次贝塞尔曲线完美匹配一样。我认为将你的函数拟合到一条贝塞尔曲线并不是一件小事（我从来没有这样做过）

您是否愿意将数学函数输出到画布元素？然后您可以编写一些javascript代码，根据输出分辨率绘制数学函数。类似于图形系统渲染贝塞尔曲线的方式

---

您知道图形系统如何渲染贝塞尔曲线吗？它们使用多段线近似贝塞尔曲线，然后测量多段线和贝塞尔曲线之间的误差差。如果误差大于某个公差-，其中公差由输出分辨率决定--贝塞尔细分并对每条贝塞尔曲线重复该过程。当贝塞尔曲线和多段线之间的差值低于公差时，将绘制多段线。

您具有数学函数，因此可以根据需要生成任意多个点

我假设问题在于，因为您不知道输出分辨率（SVG与设备无关），所以您不知道要生成多少个点。否则，您可以创建一条多段线，其中每条线约为1像素长

将你的数学函数拟合到一条贝塞尔曲线（可能）不会得到完美的匹配——就像一个圆不能被一条三次贝塞尔曲线完美匹配一样。我认为将你的函数拟合到一条贝塞尔曲线并不是一件小事（我从来没有这样做过）

您是否愿意将数学函数输出到画布元素？然后您可以编写一些javascript代码，根据输出分辨率绘制数学函数。类似于图形系统渲染贝塞尔曲线的方式

---

您知道图形系统如何渲染贝塞尔曲线吗？它们使用多段线近似贝塞尔曲线，然后测量多段线和贝塞尔曲线之间的误差差。如果误差大于某个公差-，其中公差由输出分辨率决定--贝塞尔细分并对每条贝塞尔曲线重复该过程。当贝塞尔曲线和多段线之间的差值低于公差时，将绘制多段线。

我想您希望在一定的间隔[a，b]上绘制y=f（x）

经典的解决方案是取N个均匀分布在[A，b]上的点，在这些点上计算f并绘制直线（或多项式）

当然，这在你的例子中不起作用，因为y在某些区域几乎是垂直的。但是为什么不在这些区域取更多的点（而在函数接近水平的地方取更少的点）

---

你可以计算函数的导数（或者用（f（x+h）-f（x））/h和h小来近似此导数），并用此导数确定两个连续点之间的步长

我想你想在一定的间隔[a，b]上画y=f（x）

经典的解决方案是取N个均匀分布在[A，b]上的点，在这些点上计算f并绘制直线（或多项式）

当然，这在你的例子中不起作用，因为y在某些区域几乎是垂直的。但是为什么不在这些区域取更多的点（而在函数接近水平的地方取更少的点）

您可以计算函数的导数（或使用（f（x+h）-f（x））/h和h small近似此导数），并使用此导数确定两个连续点之间的步长