在html5中，可以實現多種的圖形變換包括平移，縮放和旋轉。可以透過兩種方式，分別是矩陣法和函數法，以下分別介紹平移，縮放和旋轉用這兩種方法實現。
1.平移：
context.fillRect(50,50,50,50); context.translate(100,100); context.fillRect(50,50,50,50);
如果沒有中間這句你看到的效果會是只有一個矩形，因為第一個矩形和第二個矩形重合了，現在的效果是進行了平移，效果如下：
#首先，本篇介紹的方法都是狀態值，也就是說他的作用域會影響它下面的所有程式碼，也可以使用save和restore來儲存和彈出狀態。上面介紹的是呼叫函數來解決平移的問題，以下介紹矩陣法，我們可以使用context的transform方法來進行矩陣變化操作，它有六個參數，有些解釋喜歡把它們解釋為負責不同的操作，我更願意從整體上介紹這六個參數，也就是說分別在平移，縮放和旋轉時這些參數負責的是不同的，首先介紹整體，從整體上前四個參數負責縮放和旋轉，後兩個參數是平移，前四個參數1，# 4為一組，2#，#3為一組，1和2是x值，#3##和4是y值，56分別為x,y的平移，上面的程式碼如果用矩陣就按下面的方法寫：
context.fillRect(50,50,50,50); context.transform(1,0,0,1,100,100); //context.transform(0,1,1,0,100,100); context.fillRect(50,50,50,50);
1，4這組和# #2
，3這組中的一組裡寫#1，是因為我們要保證矩形不被縮放，如果是
0的話則大小被縮放為
0
。
2.縮放
context.fillRect(50,50,50,50); context.translate(150,50); context.scale(0.5,0.5); context.fillRect(0,0,50,50);
縮放和旋轉都要用到平移，這是因為我們如果用如下的程式碼寫會出現問題
context.fillRect(50,50,50,50); context.scale(0.5,0.5); context.fillRect(150,50,50,50);
這個程式碼看起來和上面的程式碼一樣，但實際上不一樣，因為當你呼叫
context.scale#以後，所有的座標都會縮放，會使原來的一半，所以就會和下面的效果不同以下是第一段程式碼與第二段的比較：
######################## ###可以看出後一張圖發生了錯位。 ######下面介紹矩陣法：###context.fillRect(50,50,50,50); context.transform(0,0.5,0.5,0,150,50); //context.transform(0.5,0,0,0.5,150,50); context.fillRect(0,0,50,50);
context.fillRect(50,50,50,50); context.translate(150,50); context.rotate(Math.PI/4); context.fillRect(0,0,50,50);
下面介绍的是使用矩阵法：
context.fillRect(50,50,50,50); context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50); //context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4) //,Math.sin(Math.PI/4),150,50); context.fillRect(0,0,50,50);
两组参数分别为cos旋转角，sin旋转角，负的sin旋转角，cos旋转角，或者为负的sin旋转角，cos旋转角，cos旋转角，sin旋转角。
如有错误，希望大家多多指正
以上就是Html5 Canvas初探学习笔记(6) -变换的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
