我知道我可以使用 canvas 的 arc
函数绘制弧线,但是当我增加该弧线的大小时,它会改变它的起点和终点 x,y 点。所以我在想,我们是否可以用其他方式绘制圆弧,在增加圆弧尺寸的同时保持其起点和终点固定。
编辑
下面是显示我正在寻找的图像。第一张图片显示了一个矩形。当它的侧面被拉伸(stretch)时,它变成了圆形(第二张图片)。当边被进一步拉伸(stretch)时,它变成了大圆圈。在所有图像中,您可以看到圆的端点连接到矩形的 Angular 。这就是我想要做的。
第一张图片
第二张图片
第三张图片
或者你可以看到this video了解我想要做什么。
我做了什么
这fiddle
显示我的工作结果。
要绘制矩形,只需单击并拖动鼠标。
最佳答案
我相信您正在寻找这样的东西:
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';
}
这样做有几个缺点,就是越靠近圆圈它就会“变慢”,因为圆圈在隐藏部分呈指数级增长( slider 控制它的大小),而且它不起作用对于现在的对 Angular 线。
除此之外,它按预期工作。
关于javascript - Canvas 用二次曲线画圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14453463/