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

This article introduces the relevant knowledge of "how to draw a circle with javascript". In the operation of actual cases, many people will encounter such a dilemma. Then 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!

The method of drawing a circle with javascript: 1, set the parameters needed by arc; 2, set startAngle and endAngle;3, and set the direction of drawing the circle through counterclockwise.

This article operating environment: windows7 system, javascript1.8.5 version, DELL G3 computer

How to draw a circle with javascript?

The use of arc as a function for JavaScript to draw circles in a web page

This article operating environment: windows7 system, javascript1.8.5 version, DELL G3 computer

First, the parameter settings required by arc

The code is as follows:

Arc (x, y, radius, startAngle, endAngle, counterclockwise)

It is easy to understand the x _ startAngle,endAngle _ y _ radius, so let's focus on the three parameters of startAngle,endAngle and radius!

2. Detailed explanation of arc parameters

1 endAngle start Angle and Angle endAngle respectively refer to the angle of the beginning and the end of the circle. The manual says that the start angle is 0 and the end angle is Angle, so it just happens to draw a circle.

2. Here are examples to explain startAngle and endAngle (note that I didn't write the code for html)

Var c = document.getElementById ('myCanvas'); var cxt = c.getContext ("2d"); cxt.fillStyle= "# FF0000"; cxt.arc (70,30,25,0,1, false); cxt.stroke ()

I set the start angle to 0 and the end angle to 1, so it looks like this

Var c = document.getElementById ('myCanvas'); var cxt = c.getContext ("2d"); cxt.fillStyle= "# FF0000"; cxt.arc (70,30,25,0,1, false); cxt.stroke ()

I set the start angle to 1 and the end angle to 2, so it looks like this

Above we can see that the end of the first picture is the starting point of the second picture, that is, a circle has countless angles, as long as you set the start angle and end angle, it can connect the two points in the shape of an arc! And the difference between the starting point and the end point is the length of the two points on the diagram! When the difference between the start point and the end point can be two points coincide, it forms a circle! Knowing this, we can make dynamic circles.

3The counterclockwise means whether it is true or false.

You see, when I set the starting point to 0, the end point to 1, and choose clockwise

Var c = document.getElementById ('myCanvas'); var cxt = c.getContext ("2d"); cxt.fillStyle= "# FF0000"; cxt.arc (70,30,25,0,1, false); cxt.stroke ()

When I set the start point to 0 and the end point to 1, I choose counterclockwise

Var c = document.getElementById ('myCanvas'); var cxt = c.getContext ("2d"); cxt.fillStyle= "# FF0000"; cxt.arc (70,30,25,0,1, true); cxt.stroke ()

This is the end of "how to draw a circle with javascript". Thank you for your 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.