Question

给定一组点，比如说（10,10）和（50,10），我如何在它们之间绘制曲线？我的几何有点生锈，我不确定使用哪种画布方法（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();
}

绘制画布中两点之间的曲线

1 个答案: