5、保存和恢复Canvas状态
context.save();
context.restore();
save可以将当前的状态暂时得存入堆中，而restore则可以读取堆中存储的状态
他们都不需要任何参数
当开始绘制一张图时，如果之前已经有图形，记得使用save保存当前的状态
立即学习“前端免费学习笔记（深入）”；
6.1、坐标空间
在canvas中，坐标空间默认为画布左上角为（0，0）为原点，x轴水平向右为正向，角度为0
y轴垂直向下为正向角度为π/2，
绘制图形时，可以使用translate（）方法移动坐标空间
trantslate()接受2个参数，代表原点偏移的量，如trantslate(100,100)
将绘图的基准点分别向右及向下偏移100px
移动坐标空间在批量绘制图形时很有用处
<canvas id="cyclePrint" style="border:1px solid" height="300px" width="800px">你的浏览器不支持canvas</canvas> <script> function drawH(hoop,fillStyle,height){ hoop.fillStyle = fillStyle; hoop.fillRect(0,0,50,height); } function draw(){ var oHoop = document.getElementById("cyclePrint").getContext("2d"); for(var i = 0; i < 15; i++) { oHoop.save(); oHoop.translate(50*i,280-20*i); drawH(oHoop,"rgb("+(10*i)+","+(255-10*i)+",255",20+20*i); oHoop.restore(); } } window.onload = function (){ draw(); } </script> 以上代码运行后在画布上绘制了若干个大小不等，颜色渐变的矩形：
代码解释：
这里建立了2个函数，draw()函数使用循环连续绘制图形
同时将绘图需要的参数传递给另一个函数drawH(),由drawH()函数完成矩形的绘制
在draw()函数的循环体中，每一次调用drawH函数，都要进行一次save()，restore()和一次
teantslate()重定位
6.2 旋转坐标空间
context.rotate(angle);
rotate只有一个参数，即旋转角度angle，旋转角度一顺时针方向为正方向，以弧度为单位，从
x轴右方向开始旋转
修改6.1的代码，可以得到以下图形：
7.缩放图形
scale()方法用于增减Canvans上下文对象中的像素数目，从而实现图形或位图的大小或缩放
context.scale(x,y)
x为横轴缩放因子，y为纵轴缩放因子，使用大于1的数作为缩放因子，将放大图形
使用0～1之间的数作为缩放因子，将缩小图片
在这个图形中，使用scale(0.95,0.95)对原图形进行了60次缩放，具体代码如下：
<canvas id="scalePrint2" style="border:1px solid" width="800px" height="600px">你的浏览器不支持canvas特效！</canvas><button id="scale2" type="button" onClick="showScalePrint()">点我绘制图形</button><script>function showScalePrint(){ var oScalePrint = document.getElementById("scalePrint2").getContext("2d"); oScalePrint.translate(400,300); for(var i = 0; i < 60; i++) { oScalePrint.save(); oScalePrint.scale(0.95,0.95); oScalePrint.fillStyle = "rgb("+(255-i*10)+","+(0+i*10)+",255)"; oScalePrint.beginPath(); oScalePrint.arc(0,0,250,0,Math.PI*2,true); oScalePrint.closePath(); oScalePrint.fill(); }}</script> 代码解释：
上面的代码中，使用了一个按钮，设定其触发事件为运行函数showScalePrint()
在函数showScalePrint()中，定位原点在(400,300)
设定oScalePrint的填充样式，进行60次循环，完成了上面的图形
7、矩阵变换
使用transform方法用于直接对变形矩阵作修改，即进行矩阵变换
context.transform(m11,m12,m21,m22,dx,dy)
原理是用变换矩阵和context原来的坐标(x,y)相乘，得到新的坐标
transform的变换矩阵表示为：
m11 m21 dx
m12 m22 dy
0 0 1
transform方法使用这个矩阵和原坐标的矩阵相乘
x
y
l
关于矩阵的乘法，遵循如下算法：
1：当矩阵A的列数等于矩阵B的行数时，A与B可以相乘。
2：矩阵C的行数等于矩阵A的行数，C的列数等于B的列数。
3：乘积C的第i行第j列的元素等于矩阵A的第i行的元素与矩阵B的第j列对应元素乘积之和。
根据以上算法，得到新的坐标矩阵为
(m11)x+(m21)y+dx
(m12)x+(m22)y+dy
1
即：
xNew = (m11)x+(m21)y+dx
yNew = (m12)x+(m22)y+dy
使用transform方法，只要设定特定的参数，就可以取代translate、scale、rotate等方法
第一眼看到矩阵变换，真是晕头转向，但只要研究足够深入，很快就会喜欢这种方法
用一条语句完成图形的移动、缩放和旋转！
