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

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

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

那一个100*100的画布



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


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


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

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


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


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

查看效果


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

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

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


×××