Html 在画布上的两点之间绘制曲线

给定一组点，比如（10,10）和（50,10），如何在它们之间绘制曲线？我的几何体有点生疏，我不确定使用哪种画布方法（arc（）、quadradicCurveTo（）等）

---

有人能给我指出正确的方向吗？

嗯，有很多不同的选项，这取决于你想要曲线的形状，但这基本上会使两点成为椭圆的一部分

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

---

有很多不同的选项，这取决于你想要曲线的形状，但这基本上会使两点成为椭圆的一部分

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

---

这取决于你想要什么样的曲线。通常一条曲线是由两个以上的点定义的。@hobberwickey，我想我不确定我到底需要什么类型的曲线。我想尽量填高。e、 g.画布高度=500，起点x=0，起点y=0，终点x=50，终点y=0，中点x=25，中点y=500；这取决于你想要什么样的曲线。通常一条曲线是由两个以上的点定义的。@hobberwickey，我想我不确定我到底需要什么类型的曲线。我想尽量填高。e、 g.画布高度=500，起点x=0，起点y=0，终点x=50，终点y=0，中点x=25，中点y=500；在Chrome/Firefox/Safari中进行了测试，但事实并非如此。中点在画布底部的某个地方结束，如果它是椭圆，它可能位于距离中心点最大半径的中点。当我运行你的代码时，线条在两端略微向上弯曲，然后鼻子向下弯曲，向左弯曲。修复了它，现在它是一条更平滑的曲线。基本上是两个不同椭圆的四分之二粘在一起。我不知道如何制作一个填充画布可用高度的连续贝塞尔曲线，或者一条与平面上两个给定点相交的二次曲线。在Chrome/Firefox/Safari中进行了测试，但实际上没有。中点在画布底部的某个地方结束，如果它是椭圆，它可能位于距离中心点最大半径的中点。当我运行你的代码时，线条在两端略微向上弯曲，然后鼻子向下弯曲，向左弯曲。修复了它，现在它是一条更平滑的曲线。基本上是两个不同椭圆的四分之二粘在一起。我不知道如何制作一条填充画布可用高度的连续贝塞尔曲线，或者一条与平面上两个给定点相交的二次曲线。