画布绘制圆形与二次曲线

Question

我知道我可以使用arc画布功能绘制弧形,但是当我增加该弧形的大小时,它会改变它的开始和结束x,y点.所以我在考虑是否可以通过其他方式绘制弧线,在增加尺寸的同时保持其起点终点不变.

编辑
下面是显示我正在寻找的图像.第一张图片显示一个矩形.当它的侧面被拉伸时,它变为圆形(第2个图像).当侧面进一步拉伸时,它变成了大圆圈.在所有图像中,您可以看到圆的端点连接到矩形的角.这就是我想要做的.

第一张图片

第二张图片

第3张图片

或者您可以看到此视频,以了解我要做的事情.

我做了什么
这fiddle显示了我的工作成果.
要绘制矩形,只需单击并拖动鼠标即可.

Here is the code

Answer 1

检查这个： http: //jsfiddle.net/KZBzq/4/

使用bezierCurveTo更新了答案

超文本标记语言

<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 已固定。这是你的要求吗？