HTML5實例教程：Canvas標簽實現矩陣變換

2024-08-26 00:17:02

字體：大中小

來源：轉載

供稿：網友

武林網(m.survivalescaperooms.com)文章簡介：HTML5每日一練之Canvas標簽的應用-矩陣變換 .

我們到現在為止，已經學習了利用坐標變換而實現的圖形變換技術，當利用坐標變換不能滿足我們的需要時，我們可以利用矩陣變換技術。接下來，我們將介紹更為復雜的矩陣變換變形技術。
矩陣是用來專門實現圖形變形的，它與坐標一起配合使用，達到變形的目的。當圖形上下文被創建完畢時，事實上也創建了一個默認的變換矩陣，如果不對這個矩陣進行修改，那么接下來繪制的圖形將以畫布的最左上角為坐標原點進行繪制圖形，繪制出來的圖形也不經過縮放變形處理，但是如果對這個變換矩陣進行修改，那么情況就不一樣了。

transform方法

context.transform(a, b, c, d, x, y);

此方法有6個參數，其中a, b, c, d這四個參數主要用來對圖形進行變形；x, y表示移動的坐標點。

在上節使用坐標變換進行圖形變形中所提到的三個方法：
translate(x, y);
scale(x ,y);
rotate(angle);
它們都可以使用transform方法來代替，套用context.transform(a, b, c, d, x, y);中的六個參入如下：
translate(x, y);
scale(a, d);
rotate(b, c);//此方法其實只有一個參數，在這里為了便于理解且對應transform，故使用剩余的2個參數，放在這里，是為了告訴大家，這兩個參數作用差不多，都是與旋轉有關
代碼案例

上一篇：HTML5實例教程:Canvas標簽坐標變換與路徑結合

下一篇：HTML5教程：Canvas標簽繪制徑向漸變圖形