Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what are the methods of drawing ellipses in HTML5 Canvas". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Overview

Canvas in HTML5 does not provide a direct way to draw an ellipse. Here is a summary of several drawing methods. Each method has its own advantages and disadvantages and should be chosen according to the situation. The parameters of each method are the same:

1.context is the 2D drawing environment object of Canvas.

2.x is the central Abscissa of the ellipse.

3.y is the central ordinate of the ellipse

4.An is the transverse axis length of the ellipse.

5.b is the length of the longitudinal axis of the ellipse.

Parametric equation method

This method uses the parameter equation of the ellipse to draw the ellipse.

The code is as follows:

/ /-draw an ellipse with a parametric equation

/ / the parameter XBI y of the function is the center of the ellipse, and the param b is the transverse half axis of the ellipse, respectively.

/ / Longitudinal axis length, which cannot be 0 at the same time

/ / the disadvantage of this method is that when the lineWidth is wide and the ellipse is flat

/ / the end of the long axis in the ellipse is sharp, not smooth and inefficient.

Function ParamEllipse (context, x, y, a, b)

{

/ / max is equal to 1 divided by the larger of the major axis values an and b

/ / I increase 1/max per cycle, indicating an increase in degrees

/ / this makes the path (arc) drawn per cycle close to 1 pixel

Var step = (a > b)? 1 / a: 1 / b

Context.beginPath ()

Context.moveTo (x + a, y); / / draw from the left end of the ellipse

For (var I = 0; I

< 2 * Math.PI; i += step) { //参数方程为x = a * cos(i), y = b * sin(i)， //参数为i，表示度数（弧度） context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); context.stroke(); }; 均匀压缩法 这种方法利用了数学中的均匀压缩原理将圆进行均匀压缩为椭圆，理论上为能够得到标准的椭圆.下面的代码会出现线宽不一致的问题，解决办法看5楼simonleung的评论。 代码如下: //------------均匀压缩法绘制椭圆-------------------- //其方法是用arc方法绘制圆，结合scale进行 //横轴或纵轴方向缩放（均匀压缩） //这种方法绘制的椭圆的边离长轴端越近越粗，长轴端点的线宽是正常值 //边离短轴越近、椭圆越扁越细，甚至产生间断，这是scale导致的结果 //这种缺点某些时候是优点，比如在表现环的立体效果（行星光环）时 //对于参数a或b为0的情况，这种方法不适用 function EvenCompEllipse(context, x, y, a, b) { context.save(); //选择a、b中的较大者作为arc方法的半径参数 var r = (a >

B)? A: b

Var ratioX = a / r; / / horizontal axis scale ratio

Var ratioY = b / r; / / Longitudinal axis scale ratio

Context.scale (ratioX, ratioY); / / scale (uniform compression)

Context.beginPath ()

/ / draw counterclockwise from the left endpoint of the ellipse

Context.moveTo ((x + a) / ratioX, y / ratioY)

Context.arc (x / ratioX, y / ratioY, r, 0,2 * Math.PI)

Context.closePath ()

Context.stroke ()

Context.restore ()

}

Cubic Bessel curve method one

Drawing ellipse by cubic Bezier curve is not only an approximation in practice, but also an approximation in theory. However, because of its high efficiency, it is often used to draw ellipses in computer vector graphics, but I am not very clear about the specific theory. The degree of approximation lies in the selection of the positions of the two control points. The position of the control point of this method is obtained by my own experiment, and the accuracy is OK.

The code is as follows:

/ /-use cubic Bezier curve to simulate ellipse 1-

/ / this method will also produce when the lineWidth is wide and the ellipse is flat.

/ / the sharp and unsmooth phenomenon at the end of the long shaft

Function BezierEllipse1 (context, x, y, a, b)

{

/ / the key is the setting of two control points in bezierCurveTo

/ / 0.5 and 0.6 are two key coefficients (obtained for experiments in this function)

Var ox = 0.5 * a

Oy = 0.6 * b

Context.save ()

Context.translate (x, y)

Context.beginPath ()

/ / draw counterclockwise from the lower end of the longitudinal axis of the ellipse

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.stroke ()

Context.restore ()

}

Cubic Bessel curve method II

This method is changed from the reply of a post in StackOverFlow, has high precision, and is usually used to draw ellipses.

The code is as follows:

/ /-use cubic Bezier curve to simulate ellipse 2-

/ / this method will also produce when the lineWidth is wide and the ellipse is flat.

/ /, the phenomenon that the end of the long shaft is sharp and not smooth.

/ / this method is more accurate than the previous Bessel method, but slightly less efficient.

Function BezierEllipse2 (ctx, x, y, a, b)

{

Var k = .5522848

Ox = a * k, / / horizontal control point offset

Oy = b * k; / / Vertical control point offset

Ctx.beginPath ()

/ / draw four cubic Bezier curves clockwise from the left end of the ellipse

Ctx.moveTo (x-a, y)

Ctx.bezierCurveTo (x-a, y-oy, x-ox, y-b, x, y-b)

Ctx.bezierCurveTo (x + ox, y-b, x + a, y-oy, x + a, y)

Ctx.bezierCurveTo (x + a, y + oy, x + ox, y + b, x, y + b)

Ctx.bezierCurveTo (x-ox, y + b, x-a, y + oy, x-a, y)

Ctx.closePath ()

Ctx.stroke ()

}

Raster method

According to the characteristics that Canvas can manipulate pixels, this method can use the basic algorithms in graphics to draw ellipses. For example, midpoint drawing ellipse algorithm and so on.

One example is the blog post "HTML5 Canvas improvement Class (1)-Raster Graphics (1) midpoint circle drawing algorithm" by Doudou Dog, a gardener. Because this method is relatively "primitive", it has great flexibility, high efficiency and high precision, but it is more complicated to realize a valuable function of drawing ellipse. For example, when the linewidth changes, the algorithm is more complicated. Although it is an algorithm for drawing circles, but the algorithm for drawing ellipses is similar, you can refer to it.

Summary

Basically none of the methods can achieve 100% accuracy because it is limited by the resolution of the display.

In fact, the best way should be arc () + scale (). KineticJS, the canvas drawing library, uses this method.

In other drawing software, unlike the inherent arc () + scale () method provided by HTML5's canvas, Bezier curves are usually used to simulate approximate ellipses, no matter how many Bezier curves are approximate. About using Bezier curve to simulate ellipse, you can refer to this material: Drawing an elliptical arc using polylines, quadratic or cubic Bezier curves.

Because arc () + scale () is the method that browsers have implemented and has the highest accuracy in theory, it is the best in terms of efficiency, accuracy, and ease of use.

After drawing the ellipse with arc () + scale (), the two methods context.stroke () and context.restore () are called in a different order, and the results will be interesting. Usually you should restore () and then stroke ().

Demo

In addition to the raster method, here are several demonstrations of drawing elliptic functions. The demonstration code is as follows:

The code is as follows:

/ /

Function execDraw ()

{

/ / solve the problem that the lineweight under Chrome is less than or equal to 1

Context.lineWidth = 1.1

Context.strokeStyle= "black"

ParamEllipse (context, 130,80,50,50); / / Circle

ParamEllipse (context, 130,80,100,20); / / Ellipse

EvenCompEllipse (context, 130,200,50,50); / / Circle

EvenCompEllipse (context, 130,200,100,20); / / Ellipse

BezierEllipse1 (context, 470,80,50,50); / / Circle

BezierEllipse1 (context, 470,80,100,20); / / Ellipse

BezierEllipse2 (context, 470,200,50,50); / / Circle

BezierEllipse2 (context, 470,200,100,20); / / Ellipse

/ / detect similarity (degree of overlap)

ParamEllipse (context, 300,450,250,50)

Context.strokeStyle = "yellow"

BezierEllipse1 (context, 300,450,250,50)

Context.strokeStyle = "blue"

BezierEllipse2 (context, 300,450,250,50)

}

Function clearCavnas ()

{

Context.clearRect (0,0,600,600)

}

/ /]] >

Clear

Note that to run the code successfully, you need a Canvas browser that supports HTML5.

This is the end of the content of "what are the ways to draw an ellipse in HTML5 Canvas". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.