图形变换 rotate _2<br>
<canvas id="canvas1" width="800" height="600" style="border:1px solid red;"></canvas>

<script>
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.strokeStyle='black'

ctx.strokeRect(100,100,100,200) //原始位置

//###########恢复后
ctx.save() //保存图形状态
ctx.beginPath()
ctx.translate(150,200); //移动坐标原点

ctx.fillStyle="rgba(0,0,255,0.2)";
ctx.rotate(Math.PI/6) //围绕着原点旋转坐标系
ctx.fillRect(-50,-100,100,200) //图形要以原点为中心

ctx.fillStyle="rgba(255,255,0,0.3)";//黄色
ctx.rotate(Math.PI/6);
ctx.fillRect(-50,-100,100,200);

ctx.restore();//恢复刚才在save时的设置状态
//###########恢复后

ctx.fillStyle="rgba(255,0,0,0.2)";//红色
ctx.fillRect(100,100,100,200) //原始位置2
</script>