javascript – 画布绘制圆形与二次曲线

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

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

第一张图片

第二张图片

第3张图片

或者你可以看到this video来了解我的目标.

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

Here is the code

解决方法

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

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,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,2*Math.PI);

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

    // Cut off the top of the circle.
    context.clearRect(0,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,4);// Target point 2

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

Working sample

这有一些缺点是它越接近圆圈就越“慢”,因为圆圈在隐藏部分中呈指数级变大(滑块控制它的大小),并且它不适用于对角线就像现在一样.

除此之外,它的工作方式与预期的一样.