我正在尝试在 JavaScript 画布上绘制方程
y = log(29.565ln(x) - 4.4898)
。挑战在于确定三次贝塞尔曲线的控制点,该曲线准确地表示指定起点和终点之间的方程。我的起始x是1.64003,起始y是-4.07205084,结束x是4,结束y是1.562245182。
我探索了各种方法,包括使用三次贝塞尔曲线并尝试使用伯恩斯坦多项式进行插值。然而,这些方法并没有产生准确的曲线临界点或控制点。
此外,我考虑过找到最大曲率点以将曲线分成两个二次贝塞尔曲线的想法,但我无法设计一个程序来准确确定
maxCurv
点。
这里有两个片段展示了我的尝试:
我正在寻求指导或替代方法,以在 JavaScript 画布上准确绘制此方程,确保绘制的曲线与指定起点和终点之间的函数行为紧密对齐。任何实现这一目标的见解、方法或策略将不胜感激。谢谢!
只需在画布上绘制路径即可绘制函数。无需近似任何东西:
// 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>