How to use two coordinates, draw an ellipse using javascript?

Question

Like hitting the picture, I have two coordinates, and I want to draw an ellipse that matches the edges of the main axes.

I tried to get the midpoint between these two coordinates and draw the base of the ellipse on that one coordinate. Code like this below the function returns an array of ellipse points that I just want:

 function add_oval(centre, x, y) {
    var assemble = new Array();
    var angle;
    var dot;
    var tangent = x / y;
    for (i = 0; i < 36; i++) {
        angle = (2 * Math.PI / 36) * i;
        dot = [centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y];
        assemble.push(dot);
    }
    return assemble;
}

But the problem is that they can only draw a horizontal ellipse, I don’t know how to change the angle.

Does anyone know how to solve my problem?

Answer 1

prompt

javascript , . ? . - , .

, , . ( ).

.

Answer 2

.

• 

  , A,B 2D-. |b|. :

  A=!
  B=!
  |b|=!
  

• C

  - A,B

  C.x=A.x + (B.x-A.x)/2
  C.y=A.y + (B.y-A.y)/2
  

  A,B

  C.x = (A.x+B.x)/2
  C.y = (A.y+B.y)/2
  

  , (, ). C .

• A,B

  , CB CA ( , )

  a.x = B.x-C.x
  a.y = B.y-C.y
  

  AB

  a.x = (B.x-A.x)/2
  a.y = (B.y-A.y)/2
  

  b , , a, - a (0,0,1) 3D-, , (x,y) (y,-x) (-y,x) 90- 2D. |a| |b|, :

  |a| = sqrt( a.x*a.x + a.y*a.y )
  b.x = a.y * |b|/|a|
  b.y =-a.x * |b|/|a|
  

• . , ang=<0,2.0*M_PI>, M_PI=3.1415926535897932384626433832795 :

  x = C.x + a.x*cos(ang) + b.x*sin(ang)
  y = C.y + a.y*cos(ang) + b.y*sin(ang)
  

  , for , . ... , - VCL/GDI (, javascript):

  bool e,e0;
  double ang,dang=2.0*M_PI/100.0; // 100 lines per 360 degree
  for (e=true,e0=true,ang=0.0;e;ang+=dang,e0=false)
   {
   if (ang>=2.0*M_PI) { ang=2.0*M_PI; e=false; } // reached end? 360 degree
   x = C.x + a.x*cos(ang) + b.x*sin(ang);
   y = C.y + a.y*cos(ang) + b.y*sin(ang);
   if (e0) Canvas->MoveTo(x,y); // first time is cursor moved to (x,y)
    else   Canvas->LineTo(x,y); // all the other iterations just draws a line from last cursor to (x,y) and also moves the cursor there
   }
  

• 2D (x,y)
• - ( )
• |a| a
• , |a|>|b|
• |b| , |a| , |b|/|a|=0.3