Javascriptのキャンバス曲線

Question

与えられて、私は、任意の（無作為化）曲線を描きたい：

• 開始点
• エンドポイント
• 曲線長

私はどのように行うことができますキャンバスの境界によって制限されたそのようなものに加えて、曲線は交差できません。私はいくつかの解決策を見つけようとしていましたが、これを理解することはできません。御時間ありがとうございます。ここで

は私が達成したいもののより詳細な図である。

これは、キャンバスに描かれた二次曲線です。すべて順調。問題は、ピクセル単位の固定長、ランダムな点、キャンバスのサイズと非交差で囲まれた、すべての点なしでこれを描画する方法です。

コードは次のようなものになります：（fiddle）これを試してみてください

function fixedCurve(A, B, length){ 
    for(int i = A; i < B; i++){ 
     //Calculate random point with propper distance to get first base point, random direction could be calculated before loop. 
     //Basicly this loop should calculate integrate of the curve and draw it each step. 
    } 
} 

Answer 1

を：

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ピクセルのランダムなコントロールポイントを計算することによって計算されます。

---

あなたは次の（質問から、あなたのような音かもしれないです）、特定の弧の長さを持つようにしたい場合は、我々はできるdo some maths。二次（放物線）の弧の長さは、次のとおりです。

我々は、式を持っているので、導関数をうまく：

だから我々はuのようにこれを定義した場合（x）は、 、Wolfram alpha gives us：だから、特定のx1とxの

2であれば、u（x）と等価な値を計算し、積分を計算することができます。

制御点を使用して一般的な2次曲線を描くには、this tutorial pageに示すように、方程式を頂点形式に変換します。賢明なことは、その方程式で数学を繰り返すことで始まり、正しい用語で「u」の新しい方程式を得ることです。