Recently, when I was doing box2dweb development, I wanted to write a function to create a positive polygon. However, due to my knowledge, I drew it on the draft paper and thought about it for a morning and didn't work out any good methods. Later, when I turned the drawer, I found out one of my brother's old paintings that painted an elliptical image with a concentric circle. When I saw this painting, I couldn't help thinking that the elliptic is not an N-edge shape? Isn't a circle a positive n edge shape? If we set the radius of two concentric circles to equal, isn't the drawn elliptical circle a circle? Therefore, I started the experiment immediately. Originally, I thought it was difficult to use the analytical expression of the circle. I didn't expect it to be done with 45 lines of code. The main mathematical knowledge used was sin and cos.
Some people may not understand how to draw an elliptical circle with concentric circles. I will use an image I found online to show it to you.
This method is classic. The practice is briefly summarized as follows:
Draw a concentric circle and draw a two-dimensional coordinate system with the center of the center as the origin. Then, use n straight lines that pass through the center of the circle to divide the circle into four equal parts, and divide the circle into 12 equal parts. Each straight line has an intersection with two circles. At this time, we can determine a point on the elliptic -- set the intersection of a straight line and a small circle to (a, B ), the intersection with the big circle is (c, d), and the coordinate of the point is (C, B ); if we have n straight lines, we will get 2 * n + 4 points. We can see that the obtained coordinate formula is: (x coordinate of the intersection of the big circle and Y coordinate of the intersection of the small circle ). To obtain these coordinates, we only need to know the number of lines N and the radius (or diameter) of the circle, and then use sin and cos for calculation. After these points are obtained, the points are connected to roughly an elliptical shape. If you set the number of N to a greater value, the drawn image is closer to the elliptic shape.
Unlike an elliptical image, it does not need to be so complicated to draw a positive polygon, but only needs a circle. And there is no coordinate system. If you want n edges to draw n straight lines that have passed the center of the circle, then the intersection of these straight lines and the circle is the vertices of Multi-deformation. Connecting a vertex is multi-deformation.
Now we can go to the Code:
<!DOCTYPE html>Including canvas rendering and HTML Tag, a total of 45 lines. In the real sense, the algorithm is only in the getpolygonvertices function. The getpolygonvertices parameter has two parameters: the first parameter is the edges edge number, and the second parameter is the circle radius, which determines the size of Multi-deformation.
The algorithm has been explained before. It is very simple and basic ~
Run the code to draw the Pentagon:
You can try to change the first parameter of getpolygonvertices to draw other polygon.
OK, close the ticket ~
This article is over. You are welcome to talk about it ~
----------------------------------------------------------------
You are welcome to repost my article.
Reprinted Please note: transferred from yorhom's game box
Http://blog.csdn.net/yorhomwang
Continue to follow my blog
Draw any regular polygon with 45 lines of code using an elliptic plot
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
