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

This article mainly explains "how to draw an ellipse with Canvas in html5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to draw an ellipse with Canvas in html5.

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:

Context is the 2D drawing environment object of Canvas.

X is the central Abscissa of the ellipse

Y is the central ordinate of the ellipse

An is the length of the transverse axis of the ellipse

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 copy 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 linWidth 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 copy 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 copy 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.

Demo

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

The copy code is as follows:

/ /

Var canvas

Context

Var div = document.getElementById ("CanvasWrap")

Div [XSS _ clean] = ""

Canvas = document.createElement ("canvas")

Canvas.style.width = "600px"

Canvas.style.height = "600px"

Canvas.width = 600,

Canvas.height = 600,

Context = canvas.getContext ("2d")

Div.appendChild (canvas)

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.

At this point, I believe you have a deeper understanding of "how to draw an ellipse with Canvas in html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.