宜宾网站建设公司

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();
}

HTML5CANVAS中的SAVE和RESTORE的原理详解和应用

所以不进行save跟restore的话，所有操作都是在旋转90度后的。

以上内容转自点点网上的Rex

说实话这个哥们讲解的实在太简略,没太看懂什么意思 于是我在他基础上改了几次代码 发现了这个restore用处所在

显卡运行后效果

查看效果

HTML5CANVAS中的SAVE和RESTORE的原理详解和应用

ps:为方便比对效果,其最后两个为动画效果

从上面图片就会发现,未旋转时,图形是一样的,可是一旋转起来,右下角黑点的位置就变化了.这就是关键所在

看上面代码你会发现.在rotate()前面会save一下

1
2
context.save();              
//坐标原点移到画布中心，并保存这个状态 context.rotate(Math.PI/2)

这样其实可以简单的理解为保存当前画布状态,更直白的说就是保存当前坐标系.

当没有rotate()的时候,整个坐标系就会旋转90度这是再绘画上黑点就会出现在箭头左侧 也就是旋转坐标系后的位置

如果rotate()的话 就会恢复save()之前的坐标系,这时绘制黑点就会出现在初始坐标的位置上,而只要箭头是旋转坐标系了.其他的画布状态还是初始的样子

不知道,这么说是否所有人都理解.其实简单看下动画效果就能够明白了

查看效果

这里顺便说下,通过动画效果我们会发现,两个图形旋转起来并不是相同的,带rotate()的图形很利于我们做动画效果,比如行走,煽动翅膀这种只需要两个图片的动作,这样交替执行就会变成动画了.所以这是这个函数的实际应用之处.

我的源码已经打包上传了,里面还有进一步的注释.不明白的同学可以下载看看.

最后说一下,以上都是我个人理解 如果有不对之处欢迎指正,在这里先谢谢达人同学了.

×××


网页名称：HTML5CANVAS中的SAVE和RESTORE的原理详解和应用
链接URL：http://ybzwz.com/article/jegcpi.html

其他资讯