Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve graphic transformation in HTML5 canvas". In daily operation, I believe that many people have doubts about how to achieve graphic transformation in HTML5 canvas. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to achieve graphic transformation in HTML5 canvas". Next, please follow the editor to study!

Is a new tag in HTML5, used to draw graphics, in fact, this tag is the same as other tags, its special feature is that the tag can get a CanvasRenderingContext2D object, we can use JavaScript script to control the object to draw.

It's just a container for drawing graphics, with height and width properties in addition to id, class, style, and so on. There are three main steps to draw on the > element:

1. Gets the DOM object corresponding to the element, which is a Canvas object

two。 Call the getContext () method of the Canvas object to get a CanvasRenderingContext2D object

3. Call the CanvasRenderingContext2D object to draw.

Graphic transformation

Translation: context.translate (x _ ray). The receiving parameters are the origin translation x in the x-axis direction and y-translation in the y-axis direction.

Zoom: context.scale (xQuery y), the receiving parameters are x axis scaled by x scale and y axis scaled by y scale.

Rotation: context.rotate (angle), the receiving parameter is the angle at which the axis rotates.

It is important to note that after making changes to the drawing, the next drawing is immediately following the previous state, so if you need to return to the original state, use context.save (); and context.restore (); to save and restore the current state:

JavaScript Code copies content to the clipboard

Var canvas = document.getElementById ("canvas")

Var context = canvas.getContext ("2d")

/ / translate ()

Context.save ()

Context.fillStyle = "# 1424DE"

Context.translate (10 and 10)

Context.fillRect (0Pol 0200200)

Context.restore ()

/ / scale ()

Context.save ()

Context.fillStyle = "# F5270B"

Context.scale (0.5, 0.5)

Context.fillRect (500550200200)

Context.restore ()

/ / rotate ()

Context.save ()

Context.fillStyle = "# 18EB0F"

Context.rotate (Math.PI / 4)

Context.fillRect (300, 10200, 200)

Context.restore ()

The effect is as follows:

Another thing related to graphic transformation is the matrix transformation: context.transform (a, b, c, d, e, f, g). The meaning of the parameter is as follows:

A scale horizontally (default is 1)

B horizontal tilt (default is 0)

C Vertical tilt (default is 0)

D Vertical scaling (default is 1)

E horizontal displacement (default is 0)

F Vertical displacement (default is 0)

At this point, the study of "how to achieve graphic transformation in HTML5 canvas" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.