复习绘制图像的擦除
上一节中，我们学习了图像的擦除。在生活中，在我们绘制图像的过程中，可能会因为失误或者想法的变化，对已经绘制好的部分要进行擦除，在canvas中，我们也完整实现了这样的擦除，当你对某一部分不满时，可以使用它进行擦除。canvas中的这个工具就是clearRect(x,y,width,height)，这里面的四个参数分别代表如下含义：
1.x需要擦除矩形部分左上角的x坐标。
2.y需要擦除部分的左上角y坐标。
3.width需要擦除部分的宽度。
4.height需要擦除部分的高度。
需要记住的是，clearRect()擦除的是矩形区域，像圆形区域或者其它形状的，目前没有看到官方接口，有待我们探索，我觉的肯定是有变通方法的。
学习状态的保存和恢复
上一节我们学习了擦除，这一节我们来学习状态的恢复和保存。
问：什么是状态的保存
答：状态的保存就是把已经做好的设置保存起来，放到箱子里面去，留待日后再用。比如你要计算一到数学题，为了能够清楚的记得每一个步骤，采取了一个极端方法，每验算一步，你就把这张草稿纸保留下来，然后把所有的步骤都誊到另外一张草稿纸上接着做，这就是状态的保存。
问：说了这么多，canvas的状态到底应该怎么保存啊？
答：canvas的状态非常简单，当你需要保存某一个状态时，只需要调用save()方法，那么它之前的所有状态就都被保存了下来。
例如：
例如：
<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把每一个状态都存在了一个栈里面，每一个状态的使用都需要弹出后面压上去的状态。
可以举个状态恢复的例子吗？
答：可以，我们先把上面状态保存的例子抄下来，然后对状态进行状态恢复举例。
<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的状态恢复与保存我们就都学完了。实现的效果可以点此查看
