save() 可以把保存坐标系的平移数据，缩放数据，旋转数据
    restore() 回复保存状态的坐标系的平移数据，缩放数据，旋转数据
    如一下代码

    1.     <canvas id="canvas" width="500" height="500" style="width: 500px; height: 500px; border: 1ex solid black;"></canvas>
    2.     <script>
    3.         var canvas = document.getElementById('canvas');
    4.         var ctx = canvas.getContext('2d');
    5.         ctx.beginPath();
    6.         ctx.translate(100,100);
    7.         ctx.rotate(Math.PI / 4);
    8.         ctx.strokeRect(0,0,100,50)
    10.         ctx.beginPath()
    11.         ctx.fillRect(200,0,100,50)
    12.     </script>

    效果图
    image.png
    旋转与平移都是全局更改，所以黑色方块才会显示到这个位置，可我想让黑色放块按照未修改前的就行渲染
    如一下代码

    1.     <canvas id="canvas" width="500" height="500" style="width: 500px; height: 500px; border: 1ex solid black;"></canvas>
    2.     <script>
    3.         var canvas = document.getElementById('canvas');
    4.         var ctx = canvas.getContext('2d');
    5.         ctx.save() // 保存初始坐标信息
    6.         ctx.beginPath();
    7.         ctx.translate(100,100);
    8.         ctx.rotate(Math.PI / 4);
    9.         ctx.strokeRect(0,0,100,50)
    11.         ctx.beginPath()
    12.         ctx.restore() // 恢复保存的信息
    13.         ctx.fillRect(200,0,100,50)
    14.     </script>

    效果如下
    image.png