Article introduction of Wulin.com (www.vevb.com): The application of the Canvas tag of HTML5 Daily Practice - Drawing coordinate transformation graphics.
When drawing graphics, we may often think of rotating the graphics, or using deformation processing on the graphics, and using the axes transformation processing function of the Canvas API to achieve this effect.When drawing graphics on a computer, it is drawn with coordinate points as the benchmark. By default, the upper left corner of the Canvas canvas corresponds to the origin of the coordinate axis (0, 0). All the graphics we mentioned earlier drawn using the Canvas API are drawn with the upper leftmost crossing of the canvas as the coordinate axis dots and are drawn in pixels.
If this coordinate axis is changed, the transformation of the figure can be implemented. There are three ways to process the coordinate transformation:
Pan
Use the translate method of the graph context object to move the axis origin, which is defined as follows: