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

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

前端图形学基础(一)——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状态管理就到这。这里是【畅哥聊技术】前端图形学系列文章，更多精彩敬请关注，未完待续。。。

前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理相关推荐

前端实现可绘制的canvas画布_JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现 ...
多个前端项目放在一个git好还是_前端工作流
没有规矩不成方圆,如果一个项目只有你一个人在维护,那么你不需要担心很多问题,因为你对它心知肚明,但同时一个人的力量无法支撑起来大型项目.更多时候,我们需要与其他人合作,共同把项目推进,这意味着我们需要 ...
layui前端页面table表格怎么格式化转换时间_前端开发面经知识点总结
HTTP,HTML,浏览器 1.说一下http和https 2.tcp三次握手,一句话概括 3.TCP和UDP的区别 4.WebSocket的实现和应用 6. 一个图片url访问后直接下载怎样实现? ...
前端重构时需要注意的事项_前端数据层落地实践
源宝导读:天际移动平台经过重构改版,近期正式发布了1.0版本,我们在低代码开发方面做了进一步增强.本文主要围绕前端Model.前端业务逻辑(领域模型).数据层与视图层解耦(包装器模式)3个方面,给大家 ...
前端如何实现网络速度测试功能_前端组件单元测试
啥?单元测试?我哪有时间写单元测试? 从软件质量说起日常生活中,商品质量永远是我们进行选择时需要着重考虑的因素,计算机软件也不例外.优秀的软件应当如我们预期的一样工作,能够正确地处理所有功能性需求. ...
前端工作累还是Java工作累_前端开发累还是后端开发累？
前端开发累还是后端开发累? 总的来说,在开发的过程当中,前端的工作量大于后端的工作量. [复杂度问题] 关于程序复杂度的问题,如果你的程序的规模,跟你的程序的复杂度成正比的话,说明你的程序架构出问题了 ...
多个canvas画布合并_canvas的基础入门
nvas是定义在浏览器上的画布.它不仅仅是一个标签元素更是一个编程工具是一套编程的接口.利用它可以开发出很多东西,比如动画,游戏,动态的图表等富有变现力和感染力的应用.还可以开发出绚丽的3D动态效果. ...
前端js获取图片大小扩展名_前端获取图片存储大小的方法
1利用input元素获取如果是input元素 var file=document.getElementById('myinput'); var fileData = file.files[0]; v ...
canvas 闭合_想使用SVG或者canvas 手绘闭合多边形，使用vml效果已经实现了，由于vml只能支持ie所以想转成SVG或canvas...
引用最近要实现一个功能,在一张图片上选好区域后,然后记录后选择的坐标.然后使用 map area 将所选区域显示出来. 我在网上找了一段vml的代码,能实现我的功能. 但是因为vml只支持ie,所以 ...

前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理

状态的保存和恢复

前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理相关推荐

最新文章

热门文章