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

一看到“2D矩陣”這個高大上的名詞，有的同學可能會有種畏懼感，“矩陣”，看起來好高深的樣子，我還是看點簡單的吧。其實本文就很簡單，你只需要有一點點css3 transform的基礎就好。

沒有前戲，直奔主題

2D矩陣指的是元素在2D平面內發生諸如縮放、平移、旋轉、拉伸四種變化，在css3中對應4個方法分別是scale()、translate()、rotate()和skew()，可以說這4個方法是css3矩陣matrix的快捷方式，因為這4個方法本質都是由matrix實現的。類似地，在canvas中，與前3種變化對應的3個方法分別是scale()、translate()、rotate()，canvas對象沒有skew()方法。css3中的矩陣和canvas矩陣原理是相通的，所以這里只說css3的矩陣matrix，兩者有一些區別，后面會說。

matrix方法有六個參數matrix(a, b, c, d, x, y)，六個參數默認值是matrix(1, 0, 0, 1, 0, 0)，這六個參數分別控制不同的變換

a 水平縮放

b 水平拉伸

c 垂直拉伸

d 垂直縮放

x 水平位移

y 垂直位移

可以運行下面的demo，改動對應的參數查看效果

<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" />)失去焦點查看變化 </div> <p class="con">還可以設置負數的喲</p> <div id="box">matrix 2D矩陣</div>
執行

如果把以上css3的4個方法還原成矩陣的寫法，它們是這樣的：

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

一目了然，matrix原始寫法看起來更復雜一些，大家一般使用左邊的快捷方式就好了。

計算變換后的transform-origin

其實矩陣基本上就上面這些內容，網上大部分介紹矩陣的教程一般都會搬出下面這張圖來嚇唬人

圖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 matrix和canvas transform的區別

 大家都知道css3 transform-origin默認是元素的中點，css3旋轉就是繞着這個點轉動，而canvas的transform的rotate方法是默認繞着canvas的原點（即左上角）旋轉。

<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">鼠標滑過查看效果</div> <canvas id="canvas2" style="background:red;" width="400" height="400"></canvas> <script> var canvas = document.getElementById("canvas2"), ctx = canvas.getContext("2d"), deg = 0; setInterval(function(){ deg++; deg > 360 && 0; ctx.clearRect(0,0,400,400); drewRect(); },50) function drewRect(){ ctx.save(); ctx.beginPath(); // ctx平移后canvas的原點變為150,150 ctx.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>
執行

OK，以上就是2D矩陣的全部內容，對文中的公式建議自己做個demo測試一下以加深印象，否則看完一會准會忘記。

水平有限，有疏漏之處歡迎交流。

by：王美建 from http://www.cnblogs.com/wangmeijian/p/4713722.html轉載注明出處。