使用 JavaScript Canvas 绘制方程：y = log(29.565ln(x) - 4.4898)

Question

我正在尝试在 JavaScript 画布上绘制方程

y = log(29.565ln(x) - 4.4898)

。挑战在于确定三次贝塞尔曲线的控制点，该曲线准确地表示指定起点和终点之间的方程。我的起始x是1.64003，起始y是-4.07205084，结束x是4，结束y是1.562245182。

我探索了各种方法，包括使用三次贝塞尔曲线并尝试使用伯恩斯坦多项式进行插值。然而，这些方法并没有产生准确的曲线临界点或控制点。

此外，我考虑过找到最大曲率点以将曲线分成两个二次贝塞尔曲线的想法，但我无法设计一个程序来准确确定

maxCurv

点。

这里有两个片段展示了我的尝试：

• .
• .

我正在寻求指导或替代方法，以在 JavaScript 画布上准确绘制此方程，确保绘制的曲线与指定起点和终点之间的函数行为紧密对齐。任何实现这一目标的见解、方法或策略将不胜感激。谢谢！

Answer 1

只需在画布上绘制路径即可绘制函数。无需近似任何东西：

// Get the graphics context and flip the coordinate
// system so that (0,0) is in the lower-left:
const ctx = graph.getContext(`2d`);
graph.width = graph.height = 400;
ctx.translate(0,graph.height);
ctx.scale(1,-1);

// JS's Math.log is the natural logaritm
const { log: ln } = Math;

// then again, we can make any log using any other log:
const log = v => ln(v)/ln(10);

// your function
const f = (x) => log(29.565 * ln(x) - 4.4898);

// your function's result for x=0 through x=<canvas.width>
const points = [...new Array(graph.width)].map((_,x) =>f(x));

// And then let's just plot that, making sure to start
// ignore the first element because f(0) is undefined.
const maxValue = points.at(-1);
const scaleY = graph.height / maxValue;

ctx.beginPath();
ctx.moveTo(1, scaleY * points[1]);
for(let x=2; x<points.length; x++) ctx.lineTo(x, scaleY * points[x]);
ctx.stroke();

canvas {
  border: 1px solid black;
  background: #EEE;
}

<canvas id="graph" width"500px" height="500px"></canvas>