canvas学习16之绘画状态的保留和回复

复习绘制图像的擦除

上一节中，我们学习了图像的擦除。在生活中，在我们绘制图像的过程中，可能会因为失误或者想法的变化，对已经绘制好的部分要进行擦除，在canvas中，我们也完整实现了这样的擦除，当你对某一部分不满时，可以使用它进行擦除。canvas中的这个工具就是clearRect(x,y,width,height)，这里面的四个参数分别代表如下含义：

1.x需要擦除矩形部分左上角的x坐标。

2.y需要擦除部分的左上角y坐标。

3.width需要擦除部分的宽度。

4.height需要擦除部分的高度。

需要记住的是，clearRect()擦除的是矩形区域，像圆形区域或者其它形状的，目前没有看到官方接口，有待我们探索，我觉的肯定是有变通方法的。

学习状态的保存和恢复

上一节我们学习了擦除，这一节我们来学习状态的恢复和保存。

问：什么是状态的保存

答：状态的保存就是把已经做好的设置保存起来，放到箱子里面去，留待日后再用。比如你要计算一到数学题，为了能够清楚的记得每一个步骤，采取了一个极端方法，每验算一步，你就把这张草稿纸保留下来，然后把所有的步骤都誊到另外一张草稿纸上接着做，这就是状态的保存。

问：说了这么多，canvas的状态到底应该怎么保存啊？

答：canvas的状态非常简单，当你需要保存某一个状态时，只需要调用save()方法，那么它之前的所有状态就都被保存了下来。

例如：

1
2
3
4
5
6
7
8
<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = "#e74478"
ctx.fillRect(0,0,200,200)
ctx.save() // 这样，状态就被保存了下来。
</script>

问： canvas的状态保存都可以保存那些状态，是不是也有不能保存的呢？

答：canvas可以保存的状态主要有基本样式和操作结果两种类型。

  • 基本样式有用来上色的两个style，包括strokeStyle和fillStyle。线条相关样式lineWidth，lineCap，lineJoin，miterLimit,阴影相关shawdowOffsetX,shawdowOffsetY,strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor,透明globalAlpha，还有globalCompositeOperation值，这个值我们目前还没学习，可以暂时有个印象就行。
  • 操作结果其实也是样式，因为操作后得留给人看嘛，不过我觉得讲他们分为操作结果会更加好点。主要有两个，当前应用的变形和裁切路径。这一块记下就行，我们马上就会学到。

问 ：canvas的状态是怎么恢复的呢？

答：我们还是之前状态保存时的演算纸来举例子，你之前每一步验算的草稿纸都保存了起来，当你需要用到某一步时，你就需要把它取出来，你就得一张张的从上往下翻，知道找到那一步，然后从哪里重新开始，原先在那一步之后的就都遗弃掉了。这就是状态的恢复。具体来说就是canvas把每一个状态都存在了一个栈里面，每一个状态的使用都需要弹出后面压上去的状态。

可以举个状态恢复的例子吗？

答：可以，我们先把上面状态保存的例子抄下来，然后对状态进行状态恢复举例。

1
2
3
4
5
6
7
8
9
10
11
12
<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = "#e74478"
ctx.fillRect(0,0,200,200)
ctx.save() // 这样，状态就被保存了下来。
ctx.fillStyle = "blue"
ctx.fillRect(20,20,160,160)
ctx.restore() // 我们想使用前面的颜色，将它的状态进行恢复。
ctx.fillRect(40,40, 120,120)
</script>

到此，canvas的状态恢复与保存我们就都学完了。实现的效果可以点此查看