Canvas method of Drawing ellipse

Source: Internet
Author: User
Tags cos sin

Transferred from: Alloyteam,

www.alloyteam.com/2015/07/canvas-hua-tuo-yuan-di-fang-fa/


Although the title is to draw an ellipse, let's first say the circle in the canvas


I'm sure you're not unfamiliar with canvas's circle of paintings.


Ogc.arc (0, 2*math.pi, false);


As shown above, the direct call to the API can be, but the computer is using raster, using the Bresenham algorithm to draw round, which we put to the end, first of all, the use of the parameters of the circle of the equation to draw a circle


Circle (OGC, 400, 300, 100);

function Circle (context, x, Y, a) {//x,y is the coordinate; A is the radius

var r = 1/a; ① Note: Here R can be written dead, but the values written in different cases are different

Context.beginpath ();

Context.moveto (x + A, y);

for (var i = 0; i < 2 * Math.PI i + = r) {

Context.lineto (x + A * Math.Cos (i), y + A * Math.sin (i));

}

Context.closepath ();

Context.fill ();

}


Principle is what, believe that the trigonometric functions good children's shoes understand easily, if do not know, note ①, I change the value of R, I believe it immediately ~


R and 2*math.pi Coordination is the precision of the circle, in the radius of 100, R take 1/10 on it, universal words can be written to death, written r = 1/a; so that the radius is large or small, the circle will be very fine, but the performance will have a great impact


Now take a look at the main character of the article, for the circle to see the ellipse


function Ellipseone (context, x, Y, A, b) {

var step = (A > B)? 1/A: 1/b;

Context.beginpath ();

Context.moveto (x + A, y);

for (var i = 0; i < 2 * Math.PI i + = Step) {

Context.lineto (x + A * Math.Cos (i), y + b * Math.sin (i));

}

Context.closepath ();

Context.fill ();

}


The circle is basically the same, but the circle has only one radius, and the ellipse is divided into long and short axes.


Look at the effect ~




All right, draw the ellipse success, the end of the article ~



How can it be..


The end of this is too no product, just the method one, the following to see the other


Method two, Uniform compression method


This is my favorite method, easy to understand, compared method one, performance is also a lot faster, the first paste code ~


function Ellipsetwo (context, x, Y, A, b) {

Context.save ();

var r = (A > B)? A:B;

var ratiox = A/R;

var ratioy = B/R;

Context.scale (Ratiox, Ratioy);

Context.beginpath ();

Context.arc (X/ratiox, Y/ratioy, R, 0, 2 * Math.PI, FALSE);

Context.closepath ();

Context.restore ();

Context.fill ();

}


The principle is to use the scale to compress a standard circle, Ratiox is the horizontal scaling ratio, Ratioy is the longitudinal axis scaling ratio, because the two values are different, so that the standard circle is scaled to an ellipse

Remember save () and restore () restores the context environment, so easy to understand the method


The following two methods are very tall, using the three-time Bezier curve method


Methods three, four, Besselfa


function Ellipsethree (context, x, Y, A, b) {

var ox = 0.5 * A,

Oy = 0.6 * b;


Context.save ();

Context.translate (x, y);

Context.beginpath ();

Context.moveto (0, B);

Context.beziercurveto (Ox, B, A, oy, a, 0);

Context.beziercurveto (A,-oy, OX,-B, 0,-B);

Context.beziercurveto (-ox,-B,-A,-oy,-A, 0);

Context.beziercurveto (-A, Oy,-ox, B, 0, B);

Context.closepath ();

Context.fill ();

Context.restore ();

}


function Ellipsefour (context, x, Y, A, b) {

var k = 0.5522848,

Ox = k * A,

Oy = k * b;


Context.translate (x, y);

Context.beginpath ();

Context.moveto (-A, 0);

Context.beziercurveto (-A, Oy,-ox,-B, 0,-B);

Context.beziercurveto (Ox, B, A,-oy, a, 0);

Context.beziercurveto (A, oy, Ox, B, 0, B);

Context.beziercurveto (-ox, B, A, oy,-a, 0);

Context.closepath ();

Context.fill ();

}


The core of Besselfa is the selection of two control points, but it has a fatal problem, when the linewidth is wider, the ellipse is flat, the long axis is more sharp, there will be no smooth situation

If you do not know what the Bezier words on their own Baidu ... This does not explain ...


And then there's the last. A grating method to draw the ellipse, the grating method to draw the circle is very simple, the ellipse is very troublesome, the following is the simplest kind of ellipse, is equal to the linewidth 1px


function ellipsefive (context, x, Y, A, b) {

var data = context.getimagedata (0, 0, 800, 600);

var imagedata = Data.data;

var tx = 0;

var ty = b;

var d = b*b + a*a* (-B + 0.25);

var mx = a * A/MATH.SQRT (A * a + b * b);


while (TX <= MX) {

if (d < 0) {

D + + b * b * (2 * tx + 3);

} else {

ty--;

D + + b * b * (2 * TX + 3) + 2 * A * A * (1-ty);


}


tx++;

Setpix (x + tx, y + ty);

Setpix (x + tx, y-ty);

Setpix (x-tx, y + ty);

Setpix (X-TX, y-ty);

}


D = b * b * (TX + 0.5) * (TX + 0.5) + A * A * (ty-1) * (ty-1)-A * A * b * b;

while (Ty > 0) {

if (d < 0) {

tx++;

D + + b*b* (2 * TX + 2) + a*a* ( -2 * ty + 3);

}

else {

D + + a*a* ( -2 * ty + 3);

}

ty--;

Setpix (x + tx, y + ty);

Setpix (x-tx, y + ty);

Setpix (x + tx, y-ty);

Setpix (X-TX, y-ty);

}


Context.putimagedata (data, 0, 0);


function Setpix (x, y) {

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.