前端：JS/38/canvas状态的保存和恢复（canvas常用状态大全），canvas画布中图像的变形

canvas状态的保存和恢复 Saving and restoring state

在了解变形之前，我先介绍两个在你开始绘制复杂图形时必不可少的方法。

canvas.save()

保存画布(canvas)的所有状态

canvas.restore()

save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
save()方法保存canvas所有状态，而restore()方法把当前状态恢复成前面save最后一次保存的canvas所有状态;
Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：

当前应用的变形（即移动，旋转和缩放，见下）
以及下面这些属性：strokeStyle ：划的样式,
fillStyle ：填充的样式;
globalAlpha ：透明度(0-1完全透明到完全不透明);
lineWidth ：线的粗细;
lineCap ：线头末端的样式，取值{butt ：默认；向线条的每个末端添加平直的边缘;
        round ：向线条的每个末端添加圆形线帽;
        square ：向线条的每个末端添加正方形线帽;};
lineJoin ：lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时, 取值{bevel ：创建斜角;
        round ：创建圆角;
        miter ：默认。创建尖角。};
miterLimit ：miterLimit 属性设置或返回最大斜接长度(返回值为数值);斜接长度指的是在两条线交汇处内角和外角之间的距离, 只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效;
lineDashOffset ：表示虚线起始绘制的偏移距离，可以用于虚线跑马灯;
shadowColor ：属性设置或返回用于阴影的颜色（三种都支持：1，颜色单词，2，十六进制颜色值，3，rgb()颜色函数）（返回值为数值且支持十六进制数，比如它的默认值为：#000000）;
shadowOffsetX ：设置或返回形状与阴影的水平距离（返回值为数值）;
shadowOffsetY ：设置或返回形状与阴影的垂直距离（返回值为数值）;
shadowBlur ：设置或返回阴影的模糊级数（返回值可以为数值且支持十六进制数，比如它的默认值为：#000000）;
globalCompositeOperation ：设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上，如下
                                                                                                                                           ;
font ：要绘制的字体的样式;
textAlign ：字体水平对齐方式;
textBaseline ：设置或返回在绘制文本时的当前文本基线，如下

                                                                                                                                           ;
direction ：设置绘制的文本的书写方向，取值：ltr ：默认。文本方向从左到右。
rtl ：文本方向从右到左。
inherit ：规定应该从父元素继承 direction 属性的值;
imageSmoothingEnabled ：设置或返回图片是否平滑（返回值为布尔值），如下
CanvasRenderingContext2D.imageSmoothingEnabled 是 Canvas 2D API 用来设置图片是否平滑的属性，true表示图片平滑（默认值），false表示图片不平滑。当我们获取 imageSmoothingEnabled 属性值时， 它会返回最新设置的值。

以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。 如果那样的话，设置属性值为false；
当前的裁切路径（clipping path），会在下一节介绍
你可以调用任意多次 save方法。每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。

globalCompositeOperation = type
这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。

@沉木