The realization of ellipse and ellipse arc drawn by HTML5 Canvas __html

Because the HTML Canvas 2D context Standard does not directly draw the ellipse and the ellipse arc method, therefore the browser generally does not have this method, however, the chrome supports the Ellipse method, as far as from which version supports, I did not verify. Ie11,edge, Firefox, the latest version of Safari is not yet supported ...


So, we need to use JS to implement this method. The principle is to use other methods that have been supported to simulate the Ellipse method, which can be implemented by means of LineTo, Quadraticcurveto, Beziercurveto, ArcTo, arc and so on.


Using LineTo to simulate, it is the form of parametric equations, the coordinates of the points on the ellipse are computed, and the simulated ellipse is drawn by LineTo. Simple, rough and effective.


Using Quadraticcurveto, Beziercurveto is an approximate simulation, the key point is to calculate the appropriate control points by using Bezier curve to fit ellipse or ellipse arc. Some specific scenarios are good for you.


With ArcTo, arc to achieve also relatively simple, do not need complex calculations, because ArcTo, ARC only provides the function of drawing a positive arc, to draw an elliptical arc, with scale deformation can be. This method is recommended for use. The implementation code is as follows:

if (CanvasRenderingContext2D.prototype.ellipse = = undefined) {
  CanvasRenderingContext2D.prototype.ellipse = function (x, y, RadiusX, radiusy, rotation, startangle, Endangle, anticlockwise) {
    this.save ();
    This.translate (x, y);
    This.rotate (rotation);
    This.scale (RadiusX, radiusy);
    This.arc (0, 0, 1, startangle, Endangle, anticlockwise);
    This.restore ();
  }

Use examples:

var canvas = document.getElementById ("canvas1"),
    ctx = Canvas.getcontext (' 2d ');
//....
Ctx.moveto (100,200);
Ctx.ellipse (0, 0, Math.PI, true);
Ctx.stroke ();

The meaning of the parameters of the Ellipse method:

X, ellipse center x coordinate

Y, ellipse center y-coordinate

RadiusX, long half shaft length

RadiusY, long half shaft length

Rotation, ellipse rotation angle (unit is degrees not radians)

StartAngle, the initial angle of the ellipse arc (in radians, not degrees). )

Endangle, ellipse arc end angle radians (in radians, not degrees.) )

Anticlockwise, whether it is drawn in a counter-clockwise direction. True to draw an elliptical arc in a counter-clockwise direction and false in a clockwise direction.

As for why a method has been discovered in 2 units of angle, I can only say: The front-end standard is so messy.

Google's canvas-5-polyfill.js is used to enhance canvas compatibility, and it also adds a ellipse method to canvas