【基础知识】HTML5 Canvas中save()和restore()的使用/Canvas状态的保存和恢复（应用背景）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

解释：

save()和restore()时保存和恢复Canvas的状态，如画笔的颜色、宽度等等，并不包括画布上的“像素图像”，目的是为了方便来回切换不同的样式所需要的状态。

在Canvas环境中绘图时，可以利用所谓的绘图堆栈状态。每个状态随时存储Canvas上下文数据。下面是存储在状态堆栈的数据列表。

• 当前的坐标变换（变换矩阵）信息，比如旋转或平移时使用的rotate()和setTransform()方法
• 当前剪贴区域
• 图形上下文对象（CanvasRenderingContext2D）的当前属性值https://blog.csdn.net/HuoYiHengYuan/article/details/99690179

应用背景

在进行绘图操作时，有时候只是想临时性地改变这些属性，比如说，可能需要在背景绘制细网格线，然后用粗一些的线条在网格之上进行后续的绘图。在这种情况下，需要于绘制网格线时临时性得血钙lineWidth的属性。

使用

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

function drawGrid(strokeStyle,fillStyle) {
        context.save();//保存这个绘图环境状态到栈中
        
        context.fillStyle=fillStyle;
        context.strokeStyle=strokeStyle;
        
        //画网格...(代码省略)
        
        context.restore();//从之前的状态从栈中释放
    }

引用

这里是一个图示讲解save和restore的，https://juejin.im/post/5c6bcb396fb9a049f66cb016

等之后在真实使用save和restore时，再回到该博文补充该知识的更加核心的东西。