我想从两个点(X,Y坐标)画一条弧线。
但是我无法找出如何指定起始角度和结束角度的方法。
我有中心点(p2),半径为r。起始点(p1)和结束点(p3)如下所示
我想要做的是使用弧线来画一个圆形轮廓,如下所示
我在这个主题上找到的所有内容都只是从0到大约2*Math.PI绘制弧线的示例。
ctx.arc(100,75,50,0,2*Math.PI);
像这样。我想不出如何使用p1和p3代替那些数字。有人能解释一下这是如何工作的,或者给我一个解决方法吗?
我想从两个点(X,Y坐标)画一条弧线。
但是我无法找出如何指定起始角度和结束角度的方法。
我有中心点(p2),半径为r。起始点(p1)和结束点(p3)如下所示
我想要做的是使用弧线来画一个圆形轮廓,如下所示
我在这个主题上找到的所有内容都只是从0到大约2*Math.PI绘制弧线的示例。
ctx.arc(100,75,50,0,2*Math.PI);
像这样。我想不出如何使用p1和p3代替那些数字。有人能解释一下这是如何工作的,或者给我一个解决方法吗?
arc()
方法只能使用角度,因此必须根据点的位置和到中心的距离进行转换(在这种情况下,距离表示半径,两者必须相同)。
arc()
的签名如下:
您可以通过简单的三角函数找到从 P2 到 P1/P3 的两个角度:void arc(unrestricted double x,
unrestricted double y,
unrestricted double radius,
unrestricted double startAngle,
unrestricted double endAngle,
optional boolean anticlockwise = false);
var startAngle = Math.atan2(p1.y - p2.y, p1.x - p2.x),
endAngle = Math.atan2(p3.y - p2.y, p3.x - p2.x);
假设已知半径,这些现在可以被输入到arc方法中:
ctx.arc(p2.x, p2.y, radius, startAngle, endAngle);
如果半径未知但已知相同,则可以执行以下操作:
```var diffX = p1.x - p2.x,
diffY = p1.y - p2.y,
radius = Math.abs(Math.sqrt(diffX*diffX + diffY*diffY));
var p2 = {x: 100 , y: 100 },
p1 = {x: 111, y: 30.9},
p3 = {x: 149.5 , y: 149.5},
diffX = p1.x - p2.x,
diffY = p1.y - p2.y,
radius = Math.abs(Math.sqrt(diffX*diffX + diffY*diffY)),
startAngle = Math.atan2(diffY, diffX),
endAngle = Math.atan2(p3.y - p2.y, p3.x - p2.x),
ctx = document.querySelector("canvas").getContext("2d");
// arc
ctx.arc(p2.x, p2.y, radius, startAngle, endAngle, false);
ctx.stroke();
// points / lines helpers:
ctx.fillRect(p1.x - 2, p1.y - 2, 4, 4);
ctx.fillRect(p2.x - 2, p2.y - 2, 4, 4);
ctx.fillRect(p3.x - 2, p3.y - 2, 4, 4);
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.x);
ctx.lineTo(p3.x, p3.x);
ctx.strokeStyle = "#999";
ctx.stroke();
<canvas height=180></canvas>
var p2 = {x: 100 , y: 100 },
p1 = {x: 111, y: 30.9},
p3 = {x: 149.5 , y: 149.5},
diffX = p1.x - p2.x,
diffY = p1.y - p2.y,
radius = Math.abs(Math.sqrt(diffX*diffX + diffY*diffY)),
startAngle = Math.atan2(diffY, diffX),
endAngle = Math.atan2(p3.y - p2.y, p3.x - p2.x),
ctx = document.querySelector("canvas").getContext("2d");
// arc
ctx.arc(p2.x, p2.y, radius, startAngle, endAngle, false);
ctx.stroke();
<canvas height=180></canvas>
ctx.arc(100,75,50,0,2*Math.PI);
这里的前两个参数是点p2的x,y坐标,第三个参数是圆的半径r。第四和第五个参数是弧的起始角度和结束角度。
设m21为连接点1(x1,y1)和点2(x2,y2)的线段斜率
m21 =(y2-y1)/(x2-x1)
设m23为连接点3(x3,y3)和点2(x2,y2)的线段斜率
m23 =(y2-y3)/(x2-x3)
ctx.arc(100, 75, 50, Math.atan(m21), Math.atan(m23), true)
会做。
如果point2是原点,那么解决方案更简单。
ctx.arc(100, 75, 50, Math.atan2(x1,y1), Math.atan2(x3,y3), true)