点击右上角的关注，不定期前端干货分享！！
欢迎来到我的前端图形学系列文章：
前端图形学基础(一)——Canvas基础入门
前端图形学基础(二)——Canvas基础
前端图形学基础(三)——Canvas绘制图片
前端图形学基础(四)——Canvas绘制曲线
我们已知晓，canvas画布，画笔的概念。如果说，我们只是在画布上绘制基础的图形，那是否感觉canvas能力有限呢？
其实不然，现在世面上的h5游戏基本都是基于canvas来实现的，也就是说，我们不仅要在画布上绘制图形，还要让图形对象能在画布上做矩阵变换、物理碰撞检测等，这时候我不得不提到canvas又一个非常重要的API。Canvas的状态的保存和恢复。
状态的保存和恢复
//保存画布(canvas)的所有状态
context.save();
恢复画布(canvas)的所有状态
context.restore();
这两个方法一般配合一起使用。
什么意思？比如我们在调用了context.translate(x,y)方法后，会将canvas原点移动到x,y的位置(默认原点为0，0)，那么在context.translate之后的绘制图形都会以(x , y)为原点开始绘制的。废话少说，直接上示例：
context.fillStyle = '#f00';context.translate(100,100);context.fillRect(0,0,100,100);context.strokeRect(100,100,100,100);这个 demo 我先将原点移动到(100，100)的位置，然后依次绘制了两个矩形，效果如下：
可以看到，两个矩形都会受到translate的影响，这往往在我们实际的开发过程中不是我们想要的，接下来我们通过canvas的状态管理来解决这个问题。
context.save();context.translate(100,100);cntext.fillRect(0,0,100,100);cotext.restore();conext.strokeRect( 50,50,100,100);效果如下：
这里面我们把translate方法和绘制第一个矩形放在了save和restore方法之间。这样可以使我们translate效果只能作用在save和restore之间。我们从图中可以看到，黑色的矩形框并未受到translate原点平移的影响。问题得到解决。
在canvas中，需要用到状态管理的有以下这些方法：
1、context.rotate(angle);
2、context.scale(scaleX,scaleY);
3、transform(m11, m12, m21, m22, dx, dy);
4、setTransform(m11, m12, m21, m22, dx, dy)
我们在开发过程中用到这些方法的切记加上状态管理机制，方能保证图形按照我们预期的去绘制了。
关于canvas状态管理就到这。这里是【畅哥聊技术】前端图形学系列文章，更多精彩敬请关注，未完待续。。。
