canvas高级--图形变换

### 一、图形变换：旋转、位移、缩放
##### 1.旋转：rotate(Math.PI/i);
* 角度自定；
* 必须要用Math.PI去设置角度，不能给数字
* 旋转之后实际上是将坐标系旋转了，一定要注意！！！
##### 2.位移：translate(x,y);
* 位置自定；（也可以超出画布的大小，但是看不到图就不怪我了）
* 位移之后实际上也就是将坐标系的原点改变了。一定要注意！！！


实例：
```
        var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");

        //开始的位置，坐标系的原点还在画布的最左上角
context.beginPath();
context.fillStyle = "red";
context.fillRect(0,0,100,100);

//要开始变换了
context.beginPath();
//相当于改变了坐标系的初始位置，将坐标系的原点移动到了150，150 的位置，
        //以150，150，为0，0点
//平移变化实际上变换的不是图形，而是坐标系
context.translate(150,150);
        //旋转了：坐标系的X轴和Y轴已经不是水平和竖直的了，而是发生了45°的倾斜。
context.rotate(Math.PI/4);
context.fillStyle = "red";
context.fillRect(0,0,100,100);
```
如图：




##### 3.缩放:scale(num,num);
* num 大小自定：分别表示width缩放倍数、height缩放倍数
* 缩放之后，坐标系的原点
```
        var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
//原图：
context.beginPath();
context.fillStyle = "red";
context.fillRect(0,0,100,100);
        //缩放2倍之后：
        context.beginPath();
context.fillStyle = "red";
context.scale(2,2);
context.fillRect(100,0,100,100);

        //用来对比，看蓝色的方块的位置，我们不难看出，经过缩放2倍之后，
        //坐标系的原点也发生了改变，而且蓝色的小方块宽高没有设置缩放，此时的蓝色方块的位置相对于坐标系为改变之前的位置也扩大了两倍。
        //也变大了2倍。width:100,height:100;
context.beginPath();
context.fillStyle = "blue";
        //我只设置了50的宽高哦，不是100。
context.fillRect(200,50,50,50);
```
如图：自己对比哦


俗话说得好，上有政策，下有对策，我们想实现图形变换的效果，但是又不想坐标系被我们改的不知道哪儿去了，那该怎么办？
这个时候**save();**方法和**restore();**方法这一对就出现了。为什么说这一对呢，因为它们是**成对出现**的，不能只写一个。
针对上述实例，我们可以这样做，保持坐标系一直位于画布的最左上角。
```
        //最初的位置状态，用来对比
context.beginPath();
context.fillStyle = "red";
context.fillRect(0,0,100,100);
//save()和restore是一对一对存在的，且取状态依据的是就近原则，就是两个方法靠得最近的
//保存状态，保存save之前的状态
context.save();
context.scale(2,2);
context.translate(100,100);
context.rotate(Math.PI/4);
//释放状态，把之前存的状态取出来
//取出来保存save之前的状态，最初的
context.restore();
context.beginPath();
context.fillStyle = "red";
context.fillRect(100,0,50,50);
```
上述保存的是最初的状态，坐标系还在画布最上角，结果如图：


注意了：看下述的代码中save()的位置,这里保存的就是进行图形变换之后的坐标系的状态了：（与上述对比哦）
```
        //最初的位置状态，用来对比
context.beginPath();
context.fillStyle = "red";
context.fillRect(0,0,100,100);


context.scale(2,2);
context.translate(100,100);
context.rotate(Math.PI/4);
        //保存了经过缩放、位移、旋转之后的状态，坐标系原点发生改变
context.save();
context.restore();
//释放状态，把之前存的状态取出来
//取出来保存save之前的状态，最初的


context.beginPath();
context.fillStyle = "red";
context.fillRect(100,0,50,50);
```
图：
可以肯定的说，坐标系原点位置变化了，具体变化到了哪里，就留给读者自己探究了。


备注：码字好累，下回再说。