Построить кривую между двумя точками на холсте

Question

Учитывая набор точек, скажем, (10, 10) и (50, 10), как я могу построить кривую между ними? Моя геометрия немного ржавая, и я не уверен, какой метод canvas использовать (arc(), quadradicCurveTo() и т. Д.).

Может кто-то указать мне верное направление?

Answer 1

Ну, есть много разных вариантов в зависимости от того, как вы хотите изогнуть, чтобы выглядеть, но это в основном сделает две точки частью эллипса

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();
}