How to achieve rotation and scaling in HTML5 Canvas

Editor to share with you how to achieve HTML5 Canvas rotation and scaling, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Canvas rotation

In actual development, it is often necessary to rotate an element from multiple angles to make it present another state. The next thing we need to be familiar with is the rotate (angle) method. Angle is the angle of rotation, and the center of rotation is the origin of the Canvas coordinate system.

Most importantly, we can move the coordinates of the Canvas through translate () to make the rotation natural and beautiful.

The rotation angle is counterclockwise when the rotation angle is positive and clockwise when it is negative. The sample code is as follows:

Var degree=0; / / initialize the angle value

Degree++; / / Angle self-adding (this code is useful in animation)

Ctx.rotate (degree*Math.PI/180); / / rotate the angle of its element

Canvas Zoom

Zooming is also a commonly used drawing operation, the main function is to enlarge or reduce the element according to a certain proportion. Scale () is the method used to complete the zoom operation. It is worth noting that x in scale (x, y) is a horizontal scale, y is a vertical scale, and both x and y must be positive. Because x and y can not be equal, deformation or stretching can also occur during scaling.

The scale () method does not have much content, and only one line of sample code is given here to illustrate:

Ctx.scale (2Jing 2); / / magnify the element 2x

These are all the contents of the article "how to rotate and scale HTML5 Canvas". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!