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

This article mainly introduces Canvas how to achieve the translation and rotation of the picture, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Translation transform translate ()

Translation transformation, hence the name Siyi, is a general graphic displacement. For example, here I want to translate the rectangle at (100100) to point (200200). Then all I have to do is add context.translate (100100) before drawing the rectangle.

Here translate () is passed in only two parameters, which are actually the coordinates of the origin of the new canvas coordinate system. Let's take a look at the effect with the code.

Translation transformation

Body {background: url (". / images/bg3.jpg") repeat;}

# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}

I can't believe your browser doesn't support Canvasations! Hurry up and change it!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Canvas.width = 800,

Canvas.height = 600,

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

Context.fillStyle = "# FFF"

Context.fillRect (0Pol 0800600)

Context.fillStyle = "# 00AAAA"

Context.fillRect (100100200100)

Context.fillStyle = "red"

Context.translate (100100)

Context.fillRect (100100200100)

}

Running result:

2016322112903186.jpg (850 × 500)

The blue rectangle here is the original position of the rectangle, and then the translate () method is called to shift the rectangle to (200200), which is the position of the red rectangle. Let's use a picture to see how it translates.

2016322112934958.jpg (850 × 500)

Yes, in fact, the translation transformation here is essentially translating the coordinate system, and the parameter passed in translate () is essentially the origin of the new coordinate system relative to the old coordinate system. This makes us still draw the red rectangle at (100100) and change it to (200200) after translating the coordinate system.

Pay attention to using state saving:

In fact, there is a pit here. What if we want to translate the rectangle to (300300)? We might think that we can just call context.translate (200200). Okay, let's see how it works.

JavaScript Code copies content to the clipboard

Translation transformation

Body {background: url (". / images/bg3.jpg") repeat;}

# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}

I can't believe your browser doesn't support Canvasations! Hurry up and change it!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Canvas.width = 800,

Canvas.height = 600,

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

Context.fillStyle = "# FFF"

Context.fillRect (0Pol 0800600)

Context.fillStyle = "# 00AAAA"

Context.fillRect (100100200100)

Context.fillStyle = "red"

Context.translate (100100)

Context.fillRect (100100200100)

Context.fillStyle = "green"

Context.translate (200200)

Context.fillRect (100100200100)

}

Running result:

2016322113015232.jpg (850 × 500)

The green rectangle here is not at (300300) as we expected, but runs to (400400) here. Why? You must already know the answer-Canvas is state-based rendering. After our first translation, the coordinate system is already at (100100), so if we continue to translate, this will continue to translate the coordinate system based on the new coordinate system. So how to solve it? It's simple. There are two ways.

First, after each transformation, remember to translate the coordinate system back to the origin, that is, call translate (- x _ scene _ talk).

Second, use context.save () before each translation and context.restore () after each drawing.

Remember, do not think that I continue immediately after the first translation and then translate translate (100100) on the line, so that your own coordinate system will be out of order, simply can not find the origin of your own coordinate system, after many transformations or encapsulating functions, it will kill you. Therefore, we must take the initial state as the most fundamental reference, which is a matter of principle. Here I suggest using the second method, and when it comes to all graphic transformations, it should be done this way, not just translation.

The specific use is as follows.

JavaScript Code copies content to the clipboard

Translation transformation

Body {background: url (". / images/bg3.jpg") repeat;}

# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}

I can't believe your browser doesn't support Canvasations! Hurry up and change it!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Canvas.width = 800,

Canvas.height = 600,

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

Context.fillStyle = "# FFF"

Context.fillRect (0Pol 0800600)

Context.fillStyle = "# 00AAAA"

Context.fillRect (100100200100)

Context.save ()

Context.fillStyle = "red"

Context.translate (100100)

Context.fillRect (100100200100)

Context.restore ()

Context.save ()

Context.fillStyle = "green"

Context.translate (200200)

Context.fillRect (100100200100)

Context.restore ()

}

Running result:

2016322113053867.jpg (850 × 500)

Therefore, when using graphic transformations, remember to save in conjunction with state.

Rotation transform rotate ()

Just like drawing arcs, rotate (deg) here passes in radians, not angles. At the same time, it should be noted that this rotation is clockwise around the origin of the coordinate system (0Power0). Therefore, before using rotate (), you usually need to use translate () to translate the coordinate system to determine the center of the rotation. That is, rotation transformations are usually used in conjunction with translation transformations.

The last point to note is that Canvas is a state-based drawing, so each rotation continues on the basis of the last rotation, so when using the graphic transformation, you must match the save () and restore () methods to reset the rotation angle on the one hand and the origin of the coordinate system on the other.

JavaScript Code copies content to the clipboard

Rotation transformation

Body {background: url (". / images/bg3.jpg") repeat;}

# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}

I can't believe your browser doesn't support Canvasations! Hurry up and change it!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Canvas.width = 800,

Canvas.height = 600,

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

Context.fillStyle = "# FFF"

Context.fillRect (0Pol 0800600)

For (var I = 0; I

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.