使用二次曲线在画布上绘制圆形

Question

我知道可以使用canvas的arc函数绘制弧线，但是当我增加该弧线的大小时，它会改变其起始和结束的x、y坐标。所以我在想是否有其他方法可以绘制弧线，同时保持其起始和结束点固定而增加其大小。 编辑
下面是图片，展示了我要实现的效果。第一张图片显示一个矩形。当它的边被拉伸时，它变成了圆形（第二张图片）。当边被进一步拉伸时，它变成了大圆。在所有图像中，您都可以看到圆的端点连接到矩形的角落。这就是我想要做的。

你可以查看这个视频，了解我想要做什么。

我已经完成的内容
这个fiddle展示了我的工作结果。
要绘制矩形，只需点击并拖动鼠标。

这里是代码

- Sandeep Kumar

---

你说的“改变起始和结束点”是什么意思？你能给我看一下问题的图片吗？你所说的“size”，指的是厚度吗？ - 6502

@6502：我的意思是，如果我们保持起点和终点不变，增加弧的大小，那么它看起来更像一个半圆。 - Sandeep Kumar

@6502：就像二次曲线一样，当我们增加它的大小时，端点的位置保持不变。 - Sandeep Kumar

关于那个悬赏，您用“当前的答案不包含足够的细节”这句话是什么意思？ - Cerbrus

看，如果你不解释为什么答案不够好，我们就无法帮助你。 - Cerbrus

@Cerbrus：你的回答确实有点帮助，但并不是我想要的。请看这个视频。你画了一个圆，然后删除了一部分，但我的需求是动态的，即用户将绘制一个矩形或正方形，他可以拖动任何一边，用户拖动的越多，圆就会变得越大。我尝试了你的代码，但圆没有停留在起始点，这是主要要求。 - Sandeep Kumar

Answer 1

我相信您正在寻找类似以下内容的信息：

我相信你正在寻找这样的东西：

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';
}

工作样例

这个方法有一些缺点，当你越靠近圆圈时，它会变得“慢” ，因为圆圈在隐藏部分呈指数级增长（滑块控制其大小），而且目前它不能用于对角线。

除此之外，它的表现如预期一样。

- Cerbrus

Answer 2

请查看：http://jsfiddle.net/KZBzq/4/

使用 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> 

JS

draw(100); 

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

function draw(val){

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d'),
  x = 100,
  y = 100,
  cp1x = x/2,
  cp2x = y/2,
  cp1y = val,
  cp2y = val;
  context.clearRect(0, 0, canvas.width, canvas.height);

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

  context.moveTo(25 , x);
  context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

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

}

现在x和Y已经固定。这是否符合您的要求？

- Praveen Vijayan

---

我知道我可以使用弧函数来做这件事。但我正在寻找其他方法。 - Sandeep Kumar