html - キャンバスの2点間に曲線をプロットします

Question

（10、10）と（50、10）のような一連の点が与えられた場合、それらの間に曲線をプロットするにはどうすればよいですか？私のジオメトリは少し錆びていて、どのキャンバスメソッドを使用するかわかりません（arc（）、quadradicCurveTo（）など）。

誰かが私を正しい方向に向けることができますか？

Answer 1

カーブをどのように見せたいかによって、さまざまなオプションがありますが、これにより、基本的に2つのポイントが楕円の一部になります。

function curveBetweenPoints(startX, startY, endX, endY, ctx){
    var cp1 = {
        x: startX,
        y: ctx.canvas.height - ((ctx.canvas.height - startY) / 2)
    };

    var cp2 = {
        x: startX + ((endX - startX) / 4),
        y: ctx.canvas.height
    };

    var cp3 = {
       x: endX - ((endX - startX) / 4),
       y: ctx.canvas.height
    }

    var cp4 = {
       x: endX,
       y: ctx.canvas.height - ((ctx.canvas.height - endY) / 2)
    }

    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, (endX - startX) / 2, ctx.canvas.height);
    ctx.bezierCurveTo(cp3.x, cp3.y, cp4.x, cp4.y, endX, endY);
    ctx.stroke();
}