本节书摘来自异步社区《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接近正方形，但是同样符合矩形的边界框理论。
