下午就考六级了，现在还闲不住。。。。
我们今天讲解画布对象3种变换方法：
scale，对x,y两个方向进行比例缩放
translate，平移
rotate，旋转
先来个矩形，再画2条基线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布变换规律探究</title>
</head>
<body>
<canvas id="cvs1" width="400" height="400" style="background:#6cf">你的浏览器是低版本的IE？太不幸了，换一个吧</canvas>
</body>
<script>
var ctx = document.getElementById('cvs1').getContext('2d');
ctx.strokeStyle = "black";
ctx.strokeRect(0,10,400,0);
ctx.strokeRect(10,0,0,400);
ctx.fillStyle="#d33";
ctx.fillRect(10,10,40,100);
</script>
</html>
QQ截图20161217122633.png
我们在参考线渲染之后加入scale方法，使得矩形渲染之前变换：
QQ截图20161217123541.png
得到的是这个：
QQ截图20161217123548.png
我们发现，用scale方法对X轴进行拉伸时，矩形的位置也偏移了，为什么呢？
原因：scale方法是针对整个画布缩放，缩放参考点默认在左上角
假如我们把矩形放在左上角渲染，scale不变：
QQ截图20161217124119.png
QQ截图20161217124356.png
可以看到，方形位置不偏移了，验证了我们所说：<strong>“scale参考点默认在左上角”</strong>的说法
接下来我们使用translate方法偏移整个画布：
QQ截图20161217124603.png
QQ截图20161217124610.png
可以看到，矩形位置也不再像第一次那样偏移，因为锚点、矩形跟随着整个画布移动了
核心结论：scale、translate方法都是作用在画布而不是里面的某个图形中
特别说明一点，两条基准线是在我使用变换方法之前渲染的，渲染之后所有的方法都对基线无效！
同样的的原理也适用于rotate方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布原理</title>
</head>
<body>
<canvas id="cvs1" width="400" height="400" style="background:#ddf">你的浏览器是低版本的IE？太不幸了，换一个吧</canvas>
</body>
<script>
var ctx = document.getElementById('cvs1').getContext('2d');
ctx.strokeStyle = "black";
ctx.strokeRect(0,200,400,0);//把线移到画布中央
ctx.strokeRect(200,0,0,400);
ctx.fillStyle="#d33";
ctx.fillRect(200,200,40,100);//矩形也跟着落在画布中央
</script>
</html>
QQ截图20161217125357.png
加入rotate方法，顺时针偏移10度:
QQ截图20161217130406.png
那么我们对画布做了什么呢？请看下面：
rtt.gif
如果我们把画布也偏移到200，200的地方，
QQ截图20161217131955.png
相当于这样（6M的GIF...）：
如果上述translate、scale、rotate方法执行多次，那么会一直叠加，想想看下面的图形都是怎么做出来的？
QQ截图20161217134143.png
QQ截图20161217134247.png
下期给答案
如果看完以后理解了，记得给个❤，谢谢
