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

Editor to share with you how to use HTML5 Canvas to control graphics matrix transformation, 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 know it!

When we put the corresponding 0 or 1 into the matrix, we can find that this is a unit matrix (the default value for horizontal and vertical scaling is 1, which means 1 times the scale, that is, no scaling). In this method, a new change matrix is used to multiply the current transformation matrix, and then the effects of various changes are obtained.

To put it simply, when we want to transform a graph, we only need to operate the corresponding parameters of the transformation matrix, and after the operation, the coordinates of each fixed point of the graph are multiplied by this matrix respectively, and the new fixed point coordinates can be obtained.

Transform () method

In Canvas drawing, we are provided with a way to change the transformation matrix, that is, transform ().

The default coordinate system is based on the upper-left corner of the canvas as the coordinate origin (0pc0). The more to the right, the greater the number of the X-axis, and the lower the value of the Y-axis. In the default coordinate system, the coordinates of each point are mapped directly to a CSS pixel. Some specific operations and property settings on the canvas use the default coordinate system. However, in addition to the default coordinate system, each canvas also has a "current transformation matrix" as part of the graphic state. The matrix defines the current coordinate system of the canvas. When you specify the coordinates of a point, most operations on the canvas map the point to the current coordinate system, rather than the default coordinate system. The current transformation matrix is used to convert the specified coordinates into equivalent coordinates in the default coordinate system. The transformation of coordinates also affects the drawing of text and line segments.

Calling the translate () method simply moves the coordinate origin up, down, left, and right.

The rotate () method rotates the axis clockwise according to the specified angle.

The scale () method lengthens and shortens the distance on the x-axis or y-axis. Passing a negative value will be implemented

Scale flips the axis with the coordinate origin as the reference point. It's like a mirror.

Translate is used to move the coordinate origin to the lower-left corner of the canvas, and then the scale method is used to flip the y-axis so that the y-axis becomes larger and larger as you go up.

Understand coordinate system transformation from a mathematical point of view:

The translate, rotate, and scale methods are easily understood as transformations of coordinate axes. From an algebraic point of view, it is easy to understand the coordinate transformation, that is, imagine the transformation as a point in the transformed coordinate system (xPowery), and the original coordinate system becomes (x`, y`).

Call c.translate (dx,dy). Is equivalent to the following expression

Copy the code

The code is as follows:

X` = xroomdx; / / the 0 of the x axis in the new system is dx in the original system.

Y` = y+dy

C.scale (sx,sy)

X` = sx*x

Y` = sy*y

C.rotate ()

X` = x*cos (a)-y*sin (a)

Y` = y*cos (a) + x*sin (a)

When using transform (), it is recommended that you use it in the following situations:

1. Instead of context.translate (dx,dy), use context.transform (1DX DX).

two。 Use context.transform (sx,0,0,sy,0,0) instead of context.scale (sx, sy)

3. Use context.transform (0membrec remark 0p0p0) to achieve the tilt effect (the most practical).

You no longer have to use it to achieve rotation, and you don't have to remember all these conclusions, just write down the meaning of the six parameters abcdef. the effect is the same.

Let's take a look at a code and get familiar with it:

JavaScript Code copies content to the clipboard

Matrix 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 = "yellow"

Context.strokeStyle = "# 00AAAA"

Context.lineWidth = 5

Context.save ()

/ / Pan to (300200)

Context.transform (1, 0, 0, 0, 1, 300, 200)

/ / magnify 2 times horizontally and 1.5 times vertically

Context.transform (2, 0, 0, 0, 1. 5, 0, 0)

/ / A distance of 10% of the width to the right in the horizontal direction and 10% in the vertical direction.

Context.transform (1maxim 0.1pint 0.1pr 0j0j0pl)

Context.fillRect (0Pol 0200200)

Context.strokeRect (0Pol 0200200)

Context.restore ()

}

Running result:

SetTransform () method

The behavior of the transform () method is relative to other transformations done by rotate (), scale (), translate (), and or transform (). For example, if we have set the drawing to double, the transform () method will magnify the drawing twice, and our drawing will eventually be magnified four times. This is the same as the previous transformation.

But setTransform () does not behave relative to other transformations. It also has six parameters, context.setTransform (a _ r _ r _ c _ r _ c _ r _ e _ ref), which is the same as transform ().

Here we use an example to illustrate:

Draw a rectangle, reset and create a new transformation matrix through setTransform (), draw the rectangle again, reset and create a new transformation matrix, and then draw the rectangle again.

JavaScript Code copies content to the clipboard

Matrix 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= "yellow"

Context.fillRect (200100250100)

Context.setTransform (1pyrum 0.5 meme 0.5 pint 0.5 meme 30 pr 10)

Context.fillStyle= "red"

Context.fillRect (200100250100)

Context.setTransform (1pyrum 0.5 meme 0.5 pint 0.5 meme 30 pr 10)

Context.fillStyle= "blue"

Context.fillRect (200100250100)

}

The above is all the contents of the article "how to use HTML5 Canvas to control graphic matrix transformation". 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!

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.