CSS3 matrix 2D matrices and canvas transform 2D matrices

See "2D Matrix" this tall on the noun, some students may have a fear, "matrix", looks very advanced appearance, I still see simple bar. In fact this article is very simple, you only need to have a little CSS3 transform foundation is good.

No foreplay, straight to the subject.

The three-dimensional matrix refers to the elements in the 2D plane, such as scaling, panning, rotation, stretching four kinds of changes, the corresponding 4 methods in CSS3 are scale (), translate (), rotate () and skew (), It can be said that these 4 methods are a shortcut to Matrix CSS3, because these 4 methods are essentially implemented by the Matrix. Similarly, in the canvas, the 3 methods corresponding to the first 3 changes are scale (), translate (), rotate (), and the canvas object has no skew () method. The CSS3 matrix and the canvas matrix principle are interlinked, so here we only say CSS3 matrix, there are some differences between the two, it will be said later.

The matrix method has six parameters matrix (a, B, C, D, X, y), six parameters default values are matrix (1, 0, 0, 1, 0, 0), and these six parameters control different transformations respectively

A horizontal zoom

b Horizontal Stretching

C Vertical Stretch

D Vertical Scaling

X Horizontal Displacement

Y Vertical Displacement

Can run the following demo, change the corresponding parameters to see the effect

<style>.con{margin:0 Auto; text-align:center;padding:4px 0;} #box {width:300px;height:100px; font-size:30px; border:1px solid red;margin:100px Auto;} </style><div class= "Con" >matrix (<input id= "Data" onblur= ' javascript:var oinput = document.getElementById ("Data"), Box = document.getElementById ("box"); box.style.transform = "Matrix (" +oinput.value+ ")"; ' Type= "text" value= "1,0,0,1,0,0"/>) lose focus view change </div><p class= "Con" > can also set negative number of yo </p><div id= "Box" >matrix 2D matrix </div>
Perform

If the above CSS3 4 methods are reduced to the matrix, they are:

• Scaling: Scale (SX, SY) is equivalent to matrix (SX, 0, 0, sy, 0, 0);
• Translation: Translate (TX, Ty) is equivalent to matrix (1, 0, 0, 1, TX, Ty);
• Rotation: Rotate (deg) is equivalent to matrix (cos (deg*math.pi/180), sin (deg*math.pi/180),-sin (deg*math.pi/180), cos (deg*math.pi/180), 0 , 0);
• Tensile: Skew (DEGX, degy) is equivalent to matrix (1, tan (degy*math.pi/180), tan (degx*math.pi/180), 1, 0, 0);

At a glance, the matrix original wording looks more complex, we generally use the left side of the shortcut is good.

Calculate the Transform-origin after transformation

In fact, the matrix is basically the above content, most of the online introduction of the matrix of the tutorial generally will move out the following picture to scare people

Figure 1:

A c e is multiplied by X y 1 and summed to produce the result x ' = ax + cy + E;

b d f and X y 1 are multiplied and summed to produce the result y ' = bx + dy + F;

The x y is the center point before the element transformation, that is, the value of Transform-origin, and X ' Y ' is the Transform-origin value after the element transformation.

Assuming that the center point of an element is 100,100, the element is shifted to the right by 200px, and the center point coordinates are shifted down by 100px:

X ' = ax + cy + e = 1*100 + 0*100 + 200 = 300

Y ' = 0*100 + 1*100 + 100 = 200

The center point coordinates after panning are 300,200

Figure 2:

The function of Figure 1 is simply to show us how to calculate the center point after the element transformation, nothing special.

The difference between CSS3 matrix and canvas transform

As we all know, CSS3 Transform-origin is the midpoint of the element by default, CSS3 rotation revolves around this point, and the transform of the canvas is rotated around the canvas's origin (that is, the upper-left corner).

<textarea id="demo2" style="margin: 0px; height: 187px; width: 964px;" name="" rows="7" cols="130"><style>.demo{width:200px;height:200px;background-color:blue; float:left; margin-right:50px;transition: all 1s; font-size:50px;}. Demo:hover{transform:rotate (360deg);} </style><div class= "Demo" > Mouse over View effect </div><canvas id= "Canvas2" style= "background:red;" Width= " "height=" ></canvas><script>var canvas = document.getElementById ("Canvas2"), CTX = Canvas.getcontext ("2d"), deg = 0;setinterval (function () {deg++;d eg > && 0;ctx.clearrect (0,0,400,400); Drewrect ();},50) function Drewrect () {ctx.save (); Ctx.beginpath ();//CTX Pan after the origin of the canvas becomes 150,150ctx.translate (150,150) ; Ctx.transform (Math.Cos (deg), Math.sin (deg),-math.sin (deg), Math.Cos (deg), 0, 0); Ctx.fillrect (0,0,100,100); Ctx.restore ();} </script></textarea>
Execution

OK, the above is the entire contents of the 2D matrix, the formula in the text suggest yourself to do a demo test to deepen the impression, otherwise read a will be forgotten.

The level is limited, there are omissions to welcome the exchange.

By: The Wang Meijian from http://www.cnblogs.com/wangmeijian/p/4713722.html reproduced the source.

CSS3 matrix 2D matrices and canvas transform 2D matrices