简洁软件下载网站源码,wordpress网站制作价格,1 设计一个企业网站,上海公司牌照成交价格表2021点击右上角的关注#xff0c;不定期前端干货分享#xff01;#xff01;欢迎来到我的前端图形学系列文章#xff1a;前端图形学基础(一)——Canvas基础入门前端图形学基础(二)——Canvas基础前端图形学基础(三)——Canvas绘制图片前端图形学基础(四)——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的位置(默认原点为00)那么在context.translate之后的绘制图形都会以(x , y)为原点开始绘制的。废话少说直接上示例context.fillStyle #f00;context.translate(100,100);context.fillRect(0,0,100,100);context.strokeRect(100,100,100,100);这个 demo 我先将原点移动到(100100)的位置然后依次绘制了两个矩形效果如下可以看到两个矩形都会受到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状态管理就到这。这里是【畅哥聊技术】前端图形学系列文章更多精彩敬请关注未完待续。。。
