我知道我可以使用画布的弧形函数绘制弧形,但是当我增加该弧形的大小时,它会改变它的开始和结束x,y点.所以我在考虑是否可以通过其他方式绘制弧线,在增加尺寸的同时保持其起点终点固定.
编辑
下面是显示我正在寻找的图像.第一张图片显示一个矩形.当它的侧面被拉伸时,它变为圆形(第2个图像).当侧面进一步拉伸时,它变成了大圆圈.在所有图像中,您可以看到圆的端点连接到矩形的角.这就是我想要做的.
第二张图片
第3张图片
或者你可以看到this video来了解我的目标.
解决方法
我相信你正在寻找这样的东西：
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';
}
这有一些缺点是它越接近圆圈就越“慢”,因为圆圈在隐藏部分中呈指数级变大(滑块控制它的大小),并且它不适用于对角线就像现在一样.
除此之外,它的工作方式与预期的一样.
