HTML5CANVAS中的SAVE和RESTORE的原理详解和应用_程序开发

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

admin

2023-06-11 16:02:03

0次

save是保存当前绘图状态，并把它压入一个堆栈 restore是恢复上次保存的绘图状态，从堆栈弹出。

关键在于绘图状态，它是指Canvas的平移、放缩、旋转、错切、裁剪等操作或者颜色、线条等样式。

堆栈原理，restore次数不能多于save。

那一个100*100的画布

123456789101112131415161718 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一下

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

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

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

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

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

查看效果

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

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

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

×××

上一篇：将HTML5 Canvas的内容保存为图片

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

相关内容

热门资讯