canvas技术详解（前端图形学基础）

点击右上角的关注，不定期前端干货分享！！

欢迎来到我的前端图形学系列文章：

前端图形学基础（一）——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)为原点开始绘制的。废话少说，直接上示例：

可以看到，两个矩形都会受到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状态管理就到这。这里是【畅哥聊技术】前端图形学系列文章，更多精彩敬请关注，未完待续。。。

,