繪制圖形的時候，我們可能經常會想到旋轉圖形，或者對圖形使用變形處理，使用Canvas API的坐標軸變換處理功能，就能實現這種效果。
在計算機上繪制圖形的時候，是以坐標點為基准來進行繪制的，默認情況下Canvas畫布的最左上角對應於坐標軸的原點(0, 0)。前面我們所講的所有利用Canvas API繪制出來的圖形都是以畫布最左上交為坐標軸圓點，並以像素為單位來進行繪制的。
如果對這個坐標軸進行改變，那麼就可以實現圖形的變換處理了。對坐標的變換處理有以下三種方式：
平移使用圖形上下文對象的translate方法移動坐標軸原點，該方法定義如下：
- cantext.translate(x, y);
x:表示橫坐標，也就是將坐標軸x從原點向【左】移動多少個單位，默認以像素為單位
y:表示縱坐標，也就是將坐標軸y從原點向【下】移動多少個單位，默認以像素為單位
擴大
使用圖形上下文對象的scale方法將圖形放大，該方法的定義如下所示：
- cantext.scale(x, y);
x:表示橫坐標，也就是【水平方向】將圖形放大的倍數
y:表示縱坐標，也就是【垂直方向】將圖形放大的倍數
注：將圖形縮小的時候，將這兩個參數設置為0-1之間的小數就可以了，比如，0.5表示將圖形縮小一半。
旋轉
使用圖形上下文對象的rotate方法將圖形進行旋轉，該方法的定義如下所示：
- cantext.rotate(angle);
angle：是指旋轉的角度，旋轉的中心點是坐標軸的原點。旋轉方向為順時針進行，要想逆方旋轉，只需要設置為負數即可。
下面的案例，就是使用這三種坐標變換方式共同實現的下圖效果：
- <!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 = "#d4d4d4";
- context.fillRect(0, 0, 400, 300);
- //繪制圖形
- context.translate(200, 25);
- context.fillStyle = "rgba(0, 0, 255, 0.25)";
- for(var i = 0; i < 50; i++)
- {
- context.translate(25, 25);
- context.scale(0.95, 0.95);
- context.rotate(Math.PI / 10);
- context.fillRect(0, 0, 100, 50);
- }
- }
- </script>
- </head>
- <body>
- <canvas id="W3Cfuns_canvas" width="600" height="400"></canvas>
- </body>
- </html>