我們到現在為止，已經學習了利用坐標變換而實現的圖形變換技術，當利用坐標變換不能滿足我們的需要時，我們可以利用矩陣變換技術。接下來，我們將介紹更為復雜的矩陣變換變形技術。
矩陣是用來專門實現圖形變形的，它與坐標一起配合使用，達到變形的目的。當圖形上下文被創建完畢時，事實上也創建了一個默認的變換矩陣，如果不對這個矩陣進行修改，那麼接下來繪制的圖形將以畫布的最左上角為坐標原點進行繪制圖形，繪制出來的圖形也不經過縮放變形處理，但是如果對這個變換矩陣進行修改，那麼情況就不一樣了。
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個參數，放在這裡，是為了告訴大家，這兩個參數作用差不多，都是與旋轉有關
代碼案例
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>HTML5每日一練之Canvas標簽的應用-矩陣變換</title>
- <script type="text/javascript">
- window.onload = function()
- {
- var canvas = document.getElementById("W3Cfuns_canvas");
- var context = canvas.getContext("2d");
- context.fillStyle = "#eee";
- context.fillRect(0, 0, 800, 600);
- var colors = ["#f00", "#f90", "#ff0", "#090", "#00f", "#0051a1", "#09f", "#0f0", "#0ff", "#000", "#900", "#090", "#009"];//定義顏色
- /*定義線寬*/
- context.lineWidth = 10;
- context.transform(1, 0, 0, 1, 100, 0);
- /*循環繪制圓弧*/
- for(var i = 0, j = colors.length; i < j; i++)
- {
- /*定義每次向下移動10個像素的變換矩陣*/
- context.transform(1, 0, 0.03, 1, 10, 10);
- /*設定顏色*/
- context.strokeStyle = colors;
- /*繪制圓弧*/
- context.beginPath();
- context.arc(280, 200, 150, 0, 2, true);
- context.stroke();
- }
- }
- </script>
- </head>
- <body>
- <canvas id="W3Cfuns_canvas" width="800" height="600"></canvas>
- </body>
- </html>