HTML5CANVAS中的SAVE和RESTORE的原理详解和应用
save是保存当前绘图状态，并把它压入一个堆栈restore是恢复上次保存的绘图状态，从堆栈弹出。
创新互联建站总部坐落于成都市区，致力网站建设服务有成都做网站、成都网站制作、网络营销策划、网页设计、网站维护、公众号搭建、微信小程序定制开发、软件开发等为企业提供一整套的信息化建设解决方案。创造真正意义上的网站建设，为互联网品牌在互动行销领域创造价值而不懈努力！
关键在于绘图状态，它是指Canvas的平移、放缩、旋转、错切、裁剪等操作或者颜色、线条等样式。
堆栈原理，restore次数不能多于save。
那一个100*100的画布
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | window.onload = function(){var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');context.translate(50, 50);context.save(); //坐标原点移到画布中心，并保存这个状态context.rotate(Math.PI/2); //旋转90度context.beginPath();context.moveTo(0, -50);context.lineTo(-50, 0);context.moveTo(0, -50);context.lineTo(50, 0);context.moveTo(0, -50);context.lineTo(0, 50);context.closePath(); //画一个向右的箭头context.restore();context.fillRect(40, 40, 10, 10); //画一点，restore后点在右下角，没有restore刚点在左下角，如图context.stroke();} |
所以不进行save跟restore的话，所有操作都是在旋转90度后的。
以上内容转自点点网上的Rex
说实话这个哥们讲解的实在太简略,没太看懂什么意思 于是我在他基础上改了几次代码 发现了这个restore用处所在
显卡运行后效果
查看效果
ps:为方便比对效果,其最后两个为动画效果
从上面图片就会发现,未旋转时,图形是一样的,可是一旋转起来,右下角黑点的位置就变化了.这就是关键所在
看上面代码你会发现.在rotate()前面会save一下
1 2 | context.save(); //坐标原点移到画布中心，并保存这个状态 context.rotate(Math.PI/2) |
这样其实可以简单的理解为保存当前画布状态,更直白的说就是保存当前坐标系.
当没有rotate()的时候,整个坐标系就会旋转90度这是再绘画上黑点就会出现在箭头左侧 也就是旋转坐标系后的位置
如果rotate()的话 就会恢复save()之前的坐标系,这时绘制黑点就会出现在初始坐标的位置上,而只要箭头是旋转坐标系了.其他的画布状态还是初始的样子
不知道,这么说是否所有人都理解.其实简单看下动画效果就能够明白了
查看效果
这里顺便说下,通过动画效果我们会发现,两个图形旋转起来并不是相同的,带rotate()的图形很利于我们做动画效果,比如行走,煽动翅膀这种只需要两个图片的动作,这样交替执行就会变成动画了.所以这是这个函数的实际应用之处.
我的源码已经打包上传了,里面还有进一步的注释.不明白的同学可以下载看看.
最后说一下,以上都是我个人理解 如果有不对之处欢迎指正,在这里先谢谢达人同学了.
×××
分享标题：HTML5CANVAS中的SAVE和RESTORE的原理详解和应用
新闻来源：http://cdiso.cn/article/jegcpi.html
