这里fillText直接使用rotate会有问题。估计是旋转中心有问题。
正确的逻辑为：
先使用translate移动中心点在文本起始位置，如何在0，0处fillText即可。
如果要在字符串中心进行旋转，则需要获取字符串长度，translate的时候x进行+，y轴进行-即可。
程序运行截图如下：
绿色的为原始字符串，红色是从顶部进行旋转，绿色为在中心进行旋转。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
当前浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 1980;
canvas.height = 1024;
let context = canvas.getContext("2d");
context.fillStyle = "green";
context.fillText("中文ABCDEFG", 400, 400);
context.save();
context.translate(400, 400);
context.rotate(90 * Math.PI / 180);
context.fillStyle = "red";
context.fillText("中文ABCDEFG", 0, 0);
context.restore();
//中心位置旋转
let strWidth = context.measureText("中文ABCDEFG").width;
console.log("strWidth:" + strWidth);
context.save();
context.translate(400 + strWidth / 2, 400 - strWidth / 2);
context.rotate(90 * Math.PI / 180);
context.fillStyle = "blue";
context.fillText("中文ABCDEFG", 0, 0);
context.restore();
}
</script>
</body>
</html>