在了解变形之前,我先介绍一下两个在你开始绘制复杂图形就必不可少的方法。 - save()方法用于保存canvas状态。 - restore()方法用于恢复到canvas的上一个状态。 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas 状态是以堆(stack)的方式保存的。每一次调用` save()` 方法,当前的状态就会被保存进堆中(类似数组的push());而每一次调用`restore()`方法,就会将当前状态从堆中移除(类似数组的pop())。这种状态包括: - 当前应用的变形(即移动,旋转和缩放) - 当前的裁切路径(使用clip()方法裁切) - strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation,font,textAlgin和textBaseline的值. 你可以调用任意多次 save ()方法。 每一次调用 restore() 方法,上一个保存的状态就从堆中弹出,所有设定都恢复。 实例:canvas-demo/save.html: ``` cxt.fillStyle="red"; cxt.fillRect(10,10,50,50); cxt.save(); cxt.fillStyle="blue"; cxt.fillRect(20,20,30,30); cxt.restore(); cxt.fillRect(30,30,10,10); ``` 我们第一步先设置了填充色为红色,画了一个大正方形,然后保存状态;第二步将填充色设置为蓝色,画了一个小一点正方形;跟着调用restore()恢复状态,也就是恢复填充色为红色的状态,再画了一个更小的正方形。 到目前为止所做的动作和前面章节的都很类似。不过一旦我们调用 restore,状态堆中最后的状态会弹出,并恢复所有设置。如果不是之前用 save 保存了状态,那么我们就需要手动改变设置来回到前一个状态,这个对于两三个属性的时候还是适用的,一旦多了,我们的代码将会猛涨。