Canvas状态的保存与恢复

Posted 2021-01-06 mynodejs

Canvas的API提供了save()和restore()的方法，用于保存及恢复当前canvas绘图环境的所有属性。

save()与restore()方法可以嵌套调用

save()方法将当前绘图环境压入堆栈顶部，restore()方法从堆栈顶部弹出一组状态信息，并据此恢复当前绘图环境的各个状态。这意味着可以嵌套调用save()和restore()方法。

save()

将当前canvas的状态推送到一个保存canvas状态的堆栈顶部。canvas状态包括了当前的坐标变换(transformation)信息、裁剪区域以及所有canvas绘图环境对象的属性，包括strokeStyle、fillStyle与globalCompositeOperation等。

canvas状态并不包括当前的路径或位图。只能通过调用beginPath()来重置路径。至于位图，它是canvas本身的一个属性，并不属于绘图环境对象。

尽管位图是canvas对象本身的属性，但也可以通过绘图环境对象来访问(context.getImageData())

restore()

将canvas状态堆栈顶部的条目弹出。原来保存于栈顶部的那一组状态，在弹出之后，就被设置成canvas当前的状态了。因此，在调用save()于restore()方法之间，对canvas状态所进行的修改，其效果只会持续至restore()方法被调用之前。