Canvas Translation & amp; scaling, canvas

Canvas Translation & scaling, canvas

1. Translation
Canvas is actually just a wrapper. The main part that really plays a role is the 2D rendering context, which is where we actually draw images.
However, 2D rendering context is a screen-based standard rendering platform. It uses the Cartesian coordinate system of the screen and uses the (0, 0) coordinate in the upper left corner as the origin.
The x coordinate value increases when you move to the right, and the y coordinate value increases when you move down.
After learning about the coordinate system, we can move and process the positions of the images as much as possible!
Translation, that is, the process of moving a graph from one coordinate point to another by referring to the origin point (0, 0) of the 2D rendering context!
Usage: The translate (x, y) parameters add x unit values to the left and y unit values to the coordinates of the origin.

<! DOCTYPE html> 
It is not difficult to see that once the drawing status of canvas is set, it will affect the painting attributes of all subsequent elements!
This is because they are all operated in the 2D rendering context, rather than only for the drawn image.
 
2. Zoom
Usage: scale (x, y );
Adjust the size of an element in the 2D context. The difference from the translation is that the (x, y) parameter is a zoom factor, not a pixel value.
By using this method alone, all subsequent elements are scaled in multiples. This is definitely not what you want!
Therefore, before scaling, call the save () method to save the drawing status. After the current element is scaled,
We can call the restore () method to restore the drawing to the previous state, so that only the current element can be scaled!
<! DOCTYPE html> 
 
 
Communication Group: 225443677