如何使用Canvas API旋转单个对象且不影响后续绘制？

Canvas API 里有完全对应的功能：save() 和 restore() 方法，专门用来隔离绘图状态（包括旋转、平移、缩放等变换，以及填充/描边样式），和 p5.js 的 push()/pop() 作用完全一致。

核心用法 #

• ctx.save()：把当前的绘图状态（坐标变换、样式配置等）存入状态栈，相当于“保存当前绘图现场”
• ctx.restore()：从栈顶取出最近保存的状态恢复，相当于“回到之前的绘图现场”

你的代码问题修正 #

另外要注意两个关键细节：

1. Canvas 的 rotate() 方法参数是弧度，不是角度，270度需要转换成 Math.PI * 3/2
2. 默认旋转中心是画布原点(0,0)，直接旋转会让你的矩形跑到画布外面，需要先平移到旋转对象的中心再执行旋转

修改后的完整代码：

<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<input type="number" placeholder="width" id="width">
<input type="number" placeholder="height" id="height">
</body>
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

// 保存初始绘图状态（无任何变换）
ctx.save();

// 平移到矩形的中心（设置旋转中心）
ctx.translate(200 + 100, 200 + 25); 
// 旋转270度（转换为弧度）
ctx.rotate(Math.PI * 3 / 2);
// 平移回原坐标原点
ctx.translate(-(200 + 100), -(200 + 25));

// 绘制旋转后的矩形
ctx.fillRect(200, 200, 200, 50);

// 恢复到初始状态，后续绘制不受旋转影响
ctx.restore();

// 这条线会是水平的，符合预期
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(150, 100);
ctx.closePath();
ctx.stroke();
</script>
<style>
canvas{
background-color:blue;
}
</style>
</html>

代码说明 #

• 用 save() 和 restore() 包裹旋转操作，确保只有中间的矩形受旋转影响，后面的直线绘制完全不受干扰
• 平移操作是为了让矩形绕自身中心旋转，避免旋转后位置偏移到画布外
• 把角度转成弧度是 Canvas API 的硬性要求，直接传270会导致过度旋转（1弧度≈57.3度，270弧度相当于转了43圈多）

内容的提问来源于stack exchange，提问作者user18457629