const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
function test (a,a1){
r = 100;
cx = 200;
cy = 200
x1 = cx + Math.cos(a) * r;
y1 = cy + Math.sin(a) * r;
// use a test angle x2,y2
x2 = cx + Math.cos(a1) * r;
y2 = cy + Math.sin(a1) * r;
mx = (x2 - x1)/2;
my = (y2 - y1)/2;
u = (Math.cos(a) * my - Math.sin(a) * mx)/(Math.cos(a) * mx + Math.sin(a) * my);
t = (my - mx * u)/Math.sin(a);
u = Math.atan(u)*2;
// use calculated angle and radius to get the center point from x2,y2
cx = x2 - Math.cos(a + u) * t;
cy = y2 - Math.sin(a + u) * t;
ctx.clear();
// draw line from center to x1,y1
ctx.line(cx,cy,x1,y1);
// draw cross for calculated center and draw circle using calculated radius
ctx.cross(cx,cy,2,"blue");
ctx.strokeCircle(cx,cy,Math.abs(t))
// draw line from calculated center to x2,y2
ctx.line(cx,cy,x2,y2,2,"red");
// draw starting points
ctx.cross(cx,cy,2);
ctx.cross(x1,y1);
ctx.cross(x2,y2);
}
var angle = 0;
var angle2 = 0;
function update(timer){
angle += 0.01;
angle2 += 0.02;
test(angle,angle2);
requestAnimationFrame(update);
}
requestAnimationFrame(update);
// Some render functions to display the result.
ctx.strokeCircle = function(x,y,r){
ctx.beginPath();
ctx.moveTo(x + r,y);
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.stroke();
}
ctx.line = function(x,y,xx,yy,w=1,col="black"){
ctx.lineWidth = w;
ctx.strokeStyle = col;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(xx,yy);
ctx.stroke();
}
ctx.cross = function(x,y,w=1,col="black",size = 5){
ctx.line(x-size,y-size,x+size,y+size,w,col);
ctx.line(x+size,y-size,x-size,y+size,w,col);
}
ctx.clear = function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
}
canvas { border : 2px solid black; }
<canvas id="canvas"></canvas>
Ist '(x1, y1)' immer auf der x-Achse? Auch ist '(x2, y2)' immer auf dem Kreis? – arbuthnott
Sie kennen die Position von Winkel 2, aber Sie kennen Winkel 2 nicht? Meinst du, dass du den zweiten Endpunkt kennst? – meowgoesthedog
@meowgoesthedog ja .. ich kenne nur den zweiten Endpunkt .. – Bharathi