HTML5 drawing an Ellipse

Recent projects to use HTML5 to draw ellipses, refer to the online example to find that you can draw with Bezier curves, but to draw four Bezier curves.

In the process of HTML5, it is found that the ellipse can be drawn using the method of drawing a circle

The functions of drawing circles in HTML5 are as follows:

Arc (x,y,r,start,end,clockwise); The meaning of the specific function, please check it yourself,

The implementation of the specific code is as follows:

/** * * @param x Center x coordinate * @param y center y coordinate * @param a ellipse a * @param b Ellipse b * @param arcstart  Start angle * @param arcend    knot Beam angle * @param clockwise is counterclockwise */canvasrenderingcontext2d.prototype.ellipse=function (X,y,a,b,arcstart,arcend, clockwise) {    var scale = b/a;    This.save ();    This.scale (1,scale);    This.arc (x,y/scale,a,arcstart,arcend,clockwise);    This.restore ();}

The core code of implementation is the use of the scale function, the meaning of this function is to zoom the current brush x and Y, and then to draw, it should be noted that the center is also scaled this should be noted.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

HTML5 drawing an Ellipse