How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas

The canvas element in HTML5 is used to draw pictures in the browser, so canvas can draw many different pictures. So, today we will take a look at how canvas draws an ellipse. Without further ado, Let’s get straight to the text.

First let’s take a look at the method of drawing an ellipse that comes with canvas

##ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

.

Parameters (from left to right):

(starting point x, starting point y, radius x, radius y, angle of rotation, starting point Starting angle, result angle, clockwise or counterclockwise)

Let’s look at the method code for drawing an ellipse that comes with canvas:

    
    




    当前浏览器不支持Canvas，请更换浏览器后再试

drawn by canvas The ellipse effect is as follows:

Note: This method seems to be only supported by Google at present, and ellipse() does not yet exist in other browsers.

Since the above method cannot support other browsers, let's take a look at other

canvas methods of drawing ellipses.

1. Use canvas to draw a circle to draw an ellipse

This method uses a canvas function scale, which can realize the scaling of canvas. . There are two directions of scaling: horizontal and vertical. In the code, the canvas is enlarged in the horizontal direction, but the vertical direction remains unchanged. Therefore, the circle originally drawn by arc becomes an ellipse.

The code for canvas drawing ellipse is as follows:

The canvas ellipse effect is as follows:

2. Use Bezier curve to draw an ellipse on canvas

This method of drawing an ellipse divides an ellipse into Four Bezier curves are connected to form an ellipse.

The code for canvas drawing ellipse is as follows:

    
    




    当前浏览器不支持Canvas，请更换浏览器后再试

The canvas ellipse effect is as follows:

3. Use two Bezier curves to draw an ellipse on canvas

##The code for drawing an ellipse on canvas is as follows:

//椭圆 
CanvasRenderingContext2D.prototype.oval = function (x, y, width, height) {
 var k = (width/0.75)/2, 
w = width/2, 
h = height/2; 
this.beginPath(); 
this.moveTo(x, y-h); 
this.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h); 
this.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h); 
this.closePath(); return this; 
}

Note: This method only needs to remember this point. The ratio of the width of the ellipse to the coordinates of the control points of the Bezier curve that draws the ellipse is as follows:

Bezier control point x=(ellipse width/0.75) /2.

This article ends here. For more exciting content, you can pay attention to the php Chinese website.

The above is the detailed content of How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas. For more information, please follow other related articles on the PHP Chinese website!