前端提高篇(六十八)：HTML进阶9：canvas画布基本知识（三）操作图形：坐标轴保存恢复，变换，擦除，组合

myCtx.rotate(Math.PI * 0.25);

myCtx.fillRect(100,100,100,100);

坐标轴旋转了45度

注意是先平移后旋转，还是先旋转再平移，两者结果不同

先旋转后平移：

myCtx.strokeStyle = ‘red’;

myCtx.rotate(Math.PI * 0.25);

myCtx.translate(100,0);

myCtx.fillRect(100,100,100,100);

先平移再旋转:

save() restore()

save():保存当前环境的状态

restore():返回之前保存过的路径状态和属性

在平移前保存状态，平移后返回之前的状态，再绘制图案，还是原来的坐标轴位置

myCtx.fillStyle = ‘red’;

myCtx.save();//保存状态

myCtx.translate(100,0);

myCtx.fillRect(100,100,100,100);//红色矩形

myCtx.restore();//恢复状态

myCtx.fillStyle = ‘blue’;

myCtx.fillRect(0, 0, 100, 100);//蓝色矩形