css3 matrix 2D矩阵和canvas transform 2D矩阵

一看到“2D矩阵”这个高大上的名词，有的同学可能会有种畏惧感，“矩阵”，看起来好高深的样子，我还是看点简单的吧。其实本文就很简单，你只需要有一点点css3 transform的基础就好。

<p class="my_title">没有前戏，直奔主题

这六个参数分别控制不同的变换

a 水平缩放

b 水平拉伸

c 垂直拉伸

d 垂直缩放

x 水平位移

y 垂直位移

可以运行下面的demo，改动对应的参数查看效果

.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" />)失去焦点查看变化 </div> <p class="con">还可以设置负数的哟</p> <div id="box">matrix 2D矩阵</div>
执行

• 缩放：scale(sx,sy) 等同于 matrix(sx,sy,0);
• 平移：translate(tx,ty) 等同于 matrix(1,tx,ty);
• 旋转：rotate(deg) 等同于 matrix(cos(deg),sin(deg),-sin(deg),cos(deg),0);
• 拉伸：skew(degx,degy)?等同于 matrix(1,tan(degy),tan(degx),0);

一目了然，matrix原始写法看起来更复杂一些，大家一般使用左边的快捷方式就好了。

其实矩阵基本上就上面这些内容，网上大部分介绍矩阵的教程一般都会搬出下面这张图来吓唬人

图1：

a c e分别和x y 1相乘并相加得出结果x' = ax + cy + e；

b d f分别和x y 1相乘并相加得出结果y' = bx + dy + f；

其中的x y是元素变换之前的中心点，即transform-origin的值，x' y'是元素变换之后的transform-origin值。

假设一个元素的中心点为100,100，将该元素向右平移200px，向下平移100px后，中心点坐标为:

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

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

平移后的中心点坐标为300，200

图2：

图1的作用仅仅是告诉我们如何计算元素变换后的中心点，没什么特别的。?

?大家都知道css3 transform-origin默认是元素的中点，css3旋转就是绕着这个点转动，而canvas的transform的rotate方法是默认绕着canvas的原点（即左上角）旋转。

.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">鼠标滑过查看效果</div> <canvas id="canvas2" style="background:red;" width="400" height="400"></canvas> <script> <p>var canvas = document.getElementById("canvas2"),ctx = canvas.getContext("2d"),deg = 0;<br /> setInterval(function(){<br /> deg++;<br /> deg > 360 && 0;<br /> ctx.clearRect(0,400,400);<br /> drewRect();<br /> },50)<br /> function drewRect(){<br /> ctx.save();<br /> ctx.beginPath();<br /> // ctx平移后canvas的原点变为150,150<br /> ctx.translate(150,150);<br /> ctx.transform(Math.cos(deg),Math.sin(deg),-Math.sin(deg),Math.cos(deg),0);<br /> ctx.fillRect(0,100,100);<br /> ctx.restore();<br /> }</p> </script>
执行

OK，以上就是2D矩阵的全部内容，对文中的公式建议自己做个demo测试一下以加深印象，否则看完一会准会忘记。

水平有限，有疏漏之处欢迎交流。

by： from?http://www.cnblogs.com/wangmeijian/p/4713722.html转载注明出处。

?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!