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

This article is about how to draw curves in html5 Canvas. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In the canvas line drawing article, I talked about the method of drawing a straight line. According to reason, this curve drawing article should have been published a long time ago, but because canvas drawing curve is quite special, I haven't figured it out yet, so I have to try it step by step.

One of the difficulties in drawing curves in canvas is that there are four functions of curves. They are arc,arcTo,quadraticCurveTo,bezierCurveTo. Let me start with the simplest arc method.

The function of arc is to draw a regular arc, which can be a complete circle or a certain arc of a circle.

The syntax of arc is as follows:

The code is as follows:

Context.arc (x, y, radius, startAngle, endAngle, anticlockwise)

Let me explain his parameters, that is,

Arc (Center x, Center y, Radius, start Angle, end Angle, whether counterclockwise)

What if we draw a complete circle with arc? Notice that there is a start angle and an end angle in the parameter. If our start angle is 0 and the end angle is 360, isn't it a positive circle?

Correct solution! But it should be noted that the angle here is expressed by "radians" (the same is true of Flash), and a complete circle is 360 degrees, which is 2PI radians.

So here's what we write:

The code is as follows:

Ctx.arc (400, 400, 20, 0, and 0, Math.PIQU2)

Ctx.fill ()

Ctx.stroke ()

Like lineTo, arc is the drawing path, so we have to call the fill or stroke method after him to show the graph (the figure uses a red strokeStyle and a translucent red fillStyle).

Now let's draw a circle of 1 stroke and 4 circles. The angle is 90 degrees. As mentioned earlier, the angle of 360 degrees is 2PI radians, then the degree angle is 2PI/360=PI/180 radians, then 90 degrees is 2PI/360*90=PI/2 radians (other angles please calculate by yourself).

The code is as follows:

Ctx.arc (400, 400, 400, 20, 0, and 0, Math.PIQU2, 4)

From the graph, we can determine that the 0 degree of arc is the commonly used 0 degree in mathematics, but the angle opens clockwise by default, contrary to the mathematical model (related to coordinates, because canvas coordinates are also opposite to mathematical coordinates).

But isn't there a parameter in front to determine whether it is counterclockwise? How about we set him as true?

The code is as follows:

Ctx.arc (400, 400, 400, 20, 0, and 0, Math.PItem2, 4, 4, true)

As you can see, the angle expands counterclockwise, causing the arc to become 360-90mm 270 degrees.

But! We should pay attention to one point, that is, the calculation of the starting point and the end point is always based on 0 degrees and extends clockwise, and there is no cis-trans argument. Clockwise and counterclockwise is just the direction of the arc.

This can not only prevent the confusion of going back and forth, but also make it easier to calculate.

However, it is sometimes useful to use counterclockwise flexibly.

In the above example, our starting angle is 0, now let's try another starting angle, such as 90 degrees.

The code is as follows:

Ctx.arc (400, 400, 400, 20, Math. PItem2, PItem2, 4, Math. PItem2, math. Pi)

If our starting point is 90 degrees and the end point is 90 degrees, the result is that we can't draw anything, so I changed the angle of the end point to 180 degrees and got the figure below.

Question: can we draw a complete circle from the starting point of non-zero degrees? Of course, as long as you set the end of the arc to 360 degrees + the starting angle, such as:

The code is as follows:

Ctx.arc (400, 400, 400, 20, Math.PIQU2GUP 4); / / 90 degrees from the beginning, 360 + 90 degrees from the end.

Thank you for reading! This is the end of this article on "how to draw a curve in html5 Canvas". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.