Exploration of arcTo, translate, and rotate painting using HTML5 canvas

Zookeeper

ArcTo (x1, y1, x2, y2, radius );

Add the moveTo vertex (x0, y0 );

Step 1: Find the cut point

X-ray (x1, y1), (x0, y0), X-ray (x1, y1), (x2, y2), X-ray (x1, y1 ), make the angular bisector, find the center of the circle, and make the distance to both sides of the angular equal to radius, and switch to p1 and p2 on both sides, that is, two cut points.

Step 2: draw a line

From the start point (x0, y0) lead segment to the cut point p1 (p1 is on the rays of points (x1, y1) and (x0, y0 ), then, Point p1 leads the arc line with radius to point p2 and terminates.

That is, the final line segment must start at (x0, y0), finally cut point p2, over cut point p1, certainly not (x1, y1), may pass (x2, y2) (only when it is just a cut point ).

The default canvas origin is (0, 0), that is, the point in the upper left corner. You can use translate to change the origin, for example, translate (100,200), that is, to change the origin to the (100,200) point relative to the upper left corner. Canvas is a piece of paper, drawing on top. Points and lines are based on one coordinate axis. translate changes the coordinate axis origin, that is, the transformation of the coordinate axis.

Rotate is the coordinate axis. It is also based on the coordinate origin! Therefore, if you do not need to change the origin point, rotate is the rotation relative to (0, 0. In combination with translate, It is rotated relative to the new coordinate origin. Note This. Rotating the center of a graph is undoubtedly a good choice.

To sum up, tanslate and rotate are both transformations on the canvas coordinate axis. The transformed coordinates are based on the new coordinate system. The combination of the two will be quite convenient for some rotating plots (eliminating the need to calculate complex coordinates)

(The above is the result of filling the font at the same coordinate by constantly changing the rotate angle .)