Javascript 用二次曲线画圆

我知道我可以使用画布的

arc

功能绘制圆弧，但当我增大该圆弧的大小时，它会更改其起点和终点x、y点。所以我在想，如果我们能用其他方法画出圆弧，在增加它的大小的同时保持它的起点和终点固定

编辑
下面是我正在寻找的图片。第一个图像显示一个矩形。当它的侧面被拉伸时，它变为圆形（第二幅图像）。当侧面进一步拉伸时，它会变成一个大圆圈。在所有图像中，您都可以看到圆的端点连接到矩形的角。这就是我想做的

第一张图片

第二张图片

第三张图片

或者你可以看看我想做什么

我所做的
这显示了我的工作成果。
要绘制矩形，只需单击并拖动鼠标

检查以下内容：

用bezierCurveTo更新答案

HTML

<label>Range :</label>
<input type="range" name="points" value="0" min="0" step="1" max="100" id="range"> 
<canvas id="myCanvas" width="578" height="250"></canvas> 

---

现在x和Y是固定的。这是您的要求吗？

我相信您正在寻找这样的产品：

draw(0);
$('#range').on('change', function(){
    range = parseInt($(this).val());
    draw(range)
})

function draw(val){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d'),
    x = 100,
    y = 50,
    d;
    context.clearRect(0, 0, canvas.width, canvas.height);

    d = Math.sqrt(Math.pow(val,2) + Math.pow(50,2));

    context.beginPath();
    context.lineWidth = 1;

    context.arc(x,y+val,d,0,2*Math.PI);

    // line color
    context.strokeStyle = 'black';
    context.stroke();

    // Cut off the top of the circle.
    context.clearRect(0, 0, canvas.width, y);

    // This stuff's just to show some dots
    context.fillStyle = 'red';
    context.fillRect(x-1,y-1,2,2); // Middle
    context.fillRect(x-52,y-2,4,4);//Target point 1
    context.fillRect(x+48,y-2,4,4);// Target point 2

    context.fillRect(x-2,y+d+val-2,4,4); // Point on circle
    context.fillStyle = 'black';
}

这样做有两个缺点，一是你越接近圆，它就越“慢”，因为圆在隐藏的部分（滑块控制它的大小）会以指数的方式变大，而且它不适用于现在的对角线

---

除此之外，它的工作原理与预期一致。

改变起点和终点是什么意思？你能展示一下这个问题的图片吗？“大小”是指厚度吗？@6502:我的意思是，如果我们保持起点和终点固定，并增加弧的大小，那么它看起来会更像半圆形circle@6502：就像在二次曲线中，当我们增大它的大小时，端点的位置保持不变。关于这个悬赏，你说的“当前的答案没有包含足够的细节”到底是什么意思听着，如果你不解释为什么答案不够好，我们帮不了你。我知道我可以用arc函数来做这件事。我在找别的办法。

draw(0);
$('#range').on('change', function(){
    range = parseInt($(this).val());
    draw(range)
})

function draw(val){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d'),
    x = 100,
    y = 50,
    d;
    context.clearRect(0, 0, canvas.width, canvas.height);

    d = Math.sqrt(Math.pow(val,2) + Math.pow(50,2));

    context.beginPath();
    context.lineWidth = 1;

    context.arc(x,y+val,d,0,2*Math.PI);

    // line color
    context.strokeStyle = 'black';
    context.stroke();

    // Cut off the top of the circle.
    context.clearRect(0, 0, canvas.width, y);

    // This stuff's just to show some dots
    context.fillStyle = 'red';
    context.fillRect(x-1,y-1,2,2); // Middle
    context.fillRect(x-52,y-2,4,4);//Target point 1
    context.fillRect(x+48,y-2,4,4);// Target point 2

    context.fillRect(x-2,y+d+val-2,4,4); // Point on circle
    context.fillStyle = 'black';
}