Several Methods to draw an ellipse on an HTML5 CANVAS-

Canvas in HTML5 does not directly provide the method for drawing an ellipse. The following is a summary of several painting methods. Various methods have advantages and disadvantages, which are selected as needed. The parameters of each method are the same: context is the 2D drawing environment object of Canvas, x is the abscissa of the center of the elliptical, and y is the elliptical ...,. Canvas in HTML5 does not directly provide the method for drawing an ellipse. The following is a summary of several painting methods. Various methods have advantages and disadvantages, which are selected as needed. The parameters of each method are the same:

• Context is the 2D drawing environment object of Canvas,
• X is the abscissa of the elliptical center,
• Y is the vertical coordinate of the center of the elliptic,
• A is the length of the horizontal and semi-axes of the elliptic,
• B is the length of the vertical and semi-axes of the elliptic.
  

　　 Parameter Equation Method


This method uses the parameter equation of the elliptic to plot the elliptic

1. // ----------- Use the parameter equation to draw an elliptic ---------------------
   
2. // The x and y parameters of the function are the center of the elliptic; the and B parameters are the cross and semi axes of the elliptic,
   
3. // The length of the vertical and semi-axis, which cannot be 0 at the same time
   
4. // The disadvantage of this method is that when the linWidth is wider and the ellipse is relatively flat
   
5. // The end of the long axis inside the elliptical is sharp, insmooth, and inefficient.
   
6. Function ParamEllipse (context, x, y, a, B)
   
7. {
   
8. // Max is equal to 1 divided by the greater of the long axis values a and B
   
9. // I increases by 1/max each cycle, indicating an increase in the degree
   
10. // This will make the path (ARC) drawn by each loop close to 1 pixel
    
11. Var step = (a> B )? 1/a: 1/B;
    
12. Context. beginPath ();
    
13. Context. moveTo (x + a, y); // draw from the left endpoint of the ellipse
    
14. For (var I = 0; I <2 * Math. PI; I ++ = step)
    
15. {
    
16. // The parameter equation is x = a * cos (I), y = B * sin (I ),
    
17. // The parameter is I, indicating the degree (radian)
    
18. Context. lineTo (x + a * Math. cos (I), y + B * Math. sin (I ));
    
19. }
    
20. Context. closePath ();
    
21. Context. stroke ();
    
22. };

Uniform Compression Method


This method uses the principle of uniform compress in mathematics to compress the circle evenly into an elliptic. Theoretically, a standard elliptic can be obtained.

1. // ------------ Draw an elliptic using the uniform compression method --------------------
   
2. // The method is to use the arc method to draw a circle and scale the circle.
   
3. // Horizontal or vertical scaling (even compression)
   
4. // The longer the side of the ellipse drawn by this method, the closer it is to the end of the long axis, and the longer the width of the end of the long axis is normal.
   
5. // The closer the edges are from the short axis, the thinner the oval is, and even interrupted. This is the result of scale.
   
6. // This disadvantage is sometimes an advantage, for example, when it represents the three-dimensional effect of the ring (planetary halo)
   
7. // This method is not applicable when the value of a or B is 0.
   
8. Function EvenCompEllipse (context, x, y, a, B)
   
9. {
   
10. Context. save ();
    
11. // Select the greater one in a and B as the radius parameter of the arc method.
    
12. Var r = (a> B )? A: B;
    
13. Var ratioX = a/r; // horizontal scaling ratio
    
14. Var ratioY = B/r; // zooming ratio of the vertical axis
    
15. Context. scale (ratioX, ratioY); // scale (even compression)
    
16. Context. beginPath ();
    
17. // Draw counter-clockwise from the left endpoint of the ellipse
    
18. Context. moveTo (x + a)/ratioX, y/ratioY );
    
19. Context. arc (x/ratioX, y/ratioY, r, 0, 2 * Math. PI );
    
20. Context. closePath ();
    
21. Context. stroke ();
    
22. Context. restore ();
    
23. };

The following code may cause line width inconsistency. solution:


In the uniform compression method
Context. stroke (); context. restore ();
To
Context. restore (); context. stroke ();
You can

Cubic besell curve method 1


The elliptic plot of cubic besell curves is an approximation in actual drawing and theoretically an approximation. However, because of its high efficiency, it is often used in computer vector graphics to draw an ellipse, but I am not very clear about the specific theory. The approximation lies in the selection of two control points. The position of the control point of this method is obtained by myself, and the accuracy is also acceptable.

1. // --------- Use cubic besell curves to simulate an elliptic 1 ---------------------
   
2. // This method also produces when the lineWidth is wider and the ellipse is relatively flat,
   
3. // Sharp and non-smooth long axis
   
4. Function BezierEllipse1 (context, x, y, a, B)
   
5. {
   
6. // The key is the setting of two control points in bezierCurveTo.
   
7. // 0.5 and 0.6 are two key coefficients (obtained for experiment in this function)
   
8. Var ox = 0.5 *,
   
9. Oy = 0.6 * B;
   
10. 
    
11. Context. save ();
    
12. Context. translate (x, y );
    
13. Context. beginPath ();
    
14. // Draw in the clockwise direction from the lower end of the elliptical vertical axis
    
15. Context. moveTo (0, B );
    
16. Context. bezierCurveTo (ox, B, a, oy, a, 0 );
    
17. Context. bezierCurveTo (a,-oy, ox,-B, 0,-B );
    
18. Context. bezierCurveTo (-ox,-B,-a,-oy,-a, 0 );
    
19. Context. bezierCurveTo (-a, oy,-ox, B, 0, B );
    
20. Context. closePath ();
    
21. Context. stroke ();
    
22. Context. restore ();
    
23. 
    
24. };

Cubic besell curve method 2


This method is changed from the reply of a post in StackOverFlow, with a high accuracy and is usually used to draw an elliptic.

1. // --------- Use cubic besell curves to simulate an elliptic 2 ---------------------
   
2. // This method also produces when the lineWidth is wider and the ellipse is relatively flat.
   
3. // The long axis is sharp and insmooth.
   
4. // This method is more accurate than the previous besell method, but less efficient
   
5. Function BezierEllipse2 (ctx, x, y, a, B)
   
6. {
   
7. Var k =. 5522848,
   
8. Ox = a * k, // horizontal control point offset
   
9. Oy = B * k; // Vertical Control Point offset
   
10. 
    
11. Ctx. beginPath ();
    
12. // Draw four cubic besell curves clockwise from the left endpoint of the ellipse
    
13. Ctx. moveTo (x-a, y );
    
14. Ctx. bezierCurveTo (x-a, y-oy, x-ox, y-B, x, y-B );
    
15. Ctx. bezierCurveTo (x + ox, y-B, x + a, y-oy, x + a, y );
    
16. Ctx. bezierCurveTo (x + a, y + oy, x + ox, y + B, x, y + B );
    
17. Ctx. bezierCurveTo (x-ox, y + B, x-a, y + oy, x-a, y );
    
18. Ctx. closePath ();
    
19. Ctx. stroke ();
    
20. };

Grating Method


This method can be used to draw an ellipse based on the Basic Algorithms in graphics based on the features of Canvas's ability to operate pixels. For example, the midpoint painting elliptic algorithm.


One example is a blog post "HTML5 Canvas improvement class (1)-grating graphics (1) MidPoint Circle Algorithm" by yuanyou "Doudou dog ". This method is relatively "primitive", with great flexibility, high efficiency, and high accuracy. However, it is complicated to implement a useful Elliptical Function. For example, when the line width changes, the algorithm is more complex.

Original article: Cloudy Waterman