尝试这个 (fiddle http://jsfiddle.net/naeL4/):
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "red";
ctx.beginPath();
var start = [20, 100];
var end = [120, 100];
var above = Math.random()*80+20;
// find the mid point between the ends, and subtract distance above
// from y value (y increases downwards);
var control = [0.5*(start[0]+end[0]), 0.5*(start[1]+end[1])-above];
ctx.moveTo(start[0], start[1]);
ctx.quadraticCurveTo(control[0], control[1], end[0], end[1]);
ctx.stroke();
}
draw();
这是使用quadraticCurveTo
绘制二次曲线,给定两个点并计算曲线中点上方 20 到 100 像素的随机控制点。
如果您希望二次方程具有特定的弧长(这听起来像您可能从问题中得到的),那么我们可以做一些数学题 http://en.wikipedia.org/wiki/Curve_length。二次曲线(抛物线)的弧长为:
我们有方程,所以计算导数:
因此,如果我们将其定义为 u(x),Wolfram alpha 给我们 http://www.wolframalpha.com/input/?i=integrate+sqrt%281%2B%28u%29%5E2%29:
因此,对于特定的 x1 和 x2,我们可以计算出 u(x) 的等价值,然后计算积分。
使用控制点绘制一般二次方程涉及将方程转换为顶点形式,如您所见本教程页面 http://www.purplemath.com/modules/sqrvertx.htm。明智的做法是从该方程开始重复数学运算,并以正确的项得到“u”的新方程。