Html5 Canvas初探學習筆記(6) -變換

在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);

###和上面的一樣，注掉的程式碼效果是一樣的，同樣的，也需要先平移，同樣的，第一個參數和第四個參數這組和第二個第三個參數這組是一樣的。 ######3.旋轉###

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中文网（www.php.cn）！