说明
rotate 旋转，不容易理解，看下图：
正常显示坐标
绕着 0,0 旋转后，如下图：
关键： 坐标系 跟着旋转，所以，旋转后，绘制矩形，矩形参数不需要改变，绘制后就是旋转效果
函数
ctx.rotate(angle)
形参解释：
- angle：顺时针旋转的 弧度
代码顺序
从上图可知，先旋转，再绘制图形
恢复状态
旋转并绘制图形后，要即时恢复状态，否则后面绘制的图形都是旋转的
恢复状态使用：save()、restore() 函数
旋转点（关键）
本文中，为了便于理解，是以 0,0 点进行旋转的
在实际应用中，比如让 矩形、三角形进行 原地旋转，是要先 平移 到这些图像的 中心点 ，然后再进行旋转
注意：此时要重新计算坐标
弧度
90° = Math.PI / 2
180° = Math.PI
角度换算成弧度
degree * Math.PI / 180
例子
<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-1" width="400" height="300">
</canvas>
<script>
var c = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
// 绘制正常矩形
ctx.fillStyle="orange";
ctx.fillRect(50,50,100,50);
// 旋转
ctx.rotate(30 * Math.PI / 180);
// 旋转后，再次绘制矩形，矩形参数不需要改变，也是旋转效果
ctx.fillStyle="green";
ctx.fillRect(50,50,100,50);
</script>
参考：
https://www.twle.cn/l/yufei/canvas/canvas-basic-geometric-rotate.html