html5 canvas drawing graphics_html/css_WEB-ITnose

Does anyone have a good example of drawing? Any shape will do, the most important ones are triangles, five-pointed stars, bubbles, etc.

Reply to discussion (solution)

Point
Line
Bezier curve

Canvas APIs can draw the graphics you mentioned. Do you think there's a problem?

Please give me an example of how to draw a five-pointed star.

Many examples I found on the Internet are all rotation, that is, translation.

Just want the basics now.

Point
Line
Bezier curve

Do you think there is a problem with the canvas APIs for drawing the graphics you mentioned?

Are there any examples of drawing bubbles?

I already know how to make bubbles. There is even a five-pointed star now.

Download a kenitic.js file, which is very convenient for drawing. He has encapsulated many things and can be used just like jquery. There is a website below, which is very good. You can learn about it. The website is from abroad and it is a bit slow to open. http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-star-tutorial/

Download A kenitic.js file, which is very convenient for drawing. He has encapsulated many things and can be used just like jquery. There is a website below, which is very good. You can learn about it. The website is from abroad and it is a bit slow to open http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-star-tutorial/

Here The lines of the five-pointed star are not straight. If so, just a very regular five-pointed star.

The first method
Define a coordinate as the center point of the five-pointed star

Define a length as half the length of each side of the five-pointed star
Define a coordinate set (pentagon The endpoint set of the star)
Loop 5 times
Each time, obtain the coordinate point of the radius length of the center point rotated 180/5*(current number of loops) in the direction of 90 degrees

In this way, 5 are obtained coordinate points

Loop the coordinate points and draw lines according to the connection rules of the five-pointed star


The second method is simpler
Simulate the way we draw the five-pointed star by hand

Start from a certain coordinate and draw a line segment of the specified length to the specified angle
At the coordinate point of the stop end of the line segment, the rotation angle is 135 degrees. Continue drawing
Stop after 5 times


Because you There are all bubbles, but the code is not up to scratch

The first method
Define a coordinate as the center point of the five-pointed star

Define a length as half the length of each side of the five-pointed star
Define a coordinate set (the endpoint set of the five-pointed star)
Loop 5 times
Each time, obtain the coordinate point of the radius length of the center point rotated 180/5*(current number of loops) in the direction of 90 degrees

In this way, 5 coordinate points are obtained

Loop the coordinate points and draw lines according to the connection rules of the five-pointed star


The second method is simpler
Simulation Below is our way of hand-drawing a five-pointed star

From...
The second method is good. I’ll try