本節書摘來自異步社群《html5 canvas開發詳解（第2版）》一書中的第2章，第2.7節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
畫布變換是指用數學方法調整所繪形狀的實體屬性。縮放和旋轉是常用的兩個形狀變換，本節将做專門讨論。
所有變換都依賴于背景的數學矩陣運算。幸運的是，讀者隻需使用變換功能而不必去了解這些運算。接下來，本書将讨論如何通過調整canvas屬性來應用旋轉和縮放變換。
2.7.1 旋轉和平移變換
首先指定畫布上的對象面向左側時處于角度為0的旋轉狀态（如果對象有“面”，則很重要；如果對象沒有“面”，也可将其作為參照）。例如，畫一個方框（四邊等長），它并沒有一個與其他邊相比而言初始就朝向左側的“面”。現在，将其畫出來作為參考。
context.settransform(1,0,0,1,0,0);
var angleinradians = 45 * math.pi / 180;
context.rotate(angleinradians);
例2-7 簡單旋轉變換
function drawscreen(){
//繪制一個紅色正方形
context.settransform(1,0,0,1,0,0);
var angleinradians = 45 * math.pi / 180;
context.rotate(angleinradians);
context.fillstyle = "red";
context.fillrect(100,100,50,50);
}
例2-8 旋轉以及canvas狀态
//繪制黑色正方形
context.fillstyle = "black";
context.fillrect(20,20,25,25);
//繪制紅色正方形
var x = 100;
var y = 100;
var width = 50;
var height = 50;
x+0.5*width
y+.05*height
context.translate(x+.05width, y+.05height)
context.fillrect(-0.5width,-0.5height, width, height);
例2-9 圍繞中心點旋轉
context.fillrect(20,20 ,25,25);
var x = 100;
var y = 100;
var width = 50;
var height = 50;
context.translate(x+.5width, y+.5height);
context.fillrect(-.5width,-.5height , width, height);
例2-10 旋轉多個正方形
var x = 50;
var width = 40;
var height = 40;
var angleinradians = 75 * math.pi / 180;
var angleinradians = 90 * math.pi / 180;
var x = 150;
var angleinradians = 120 * math.pi / 180;
var x = 200;
}
context.scale(2,2);
context.fillstyle = "red";
context.fillrect(100,100 ,50,50);
例2-11 從中心點縮放
context.scale(2,2);
例2-12 縮放和旋轉組合
例2-13 非正方形對象的縮放和旋轉
//繪制一個紅色矩形
var width = 100;
s<code>`</code>
tyle="text-align: center">
https://yqfile.alicdn.com/1a5bd984c61b59c2625345f660a0dd7c17df0f8a.png" >
找到任何形狀的中心
對矩形或其他形狀進行旋轉和縮放與對正方形非常類似，實際上隻要在縮放、旋轉或者組合縮放旋轉前将原點平移到形狀的中心，都可以得到想要的效果。記住，任何形狀的中心點都是半寬的x值和半高的y值！這需要使用邊界框理論找到中心點。
圖2-22說明了這個理論，盡管不是簡單形狀，也可以找到包含對象任一點的邊界框。圖2-22接近正方形，但是同樣符合矩形的邊界框理論。
