Canvas无动画静态文本旋转简单实现示例

核心实现不需要动画循环，单次绘制即可完成静态旋转文本渲染，核心步骤如下：

• 先获取Canvas绘图上下文，调用save()方法保存画布默认状态
• 调用translate()把画布原点移动到文本放置的目标坐标，这一步是为了让旋转围绕文本自身位置生效，避免出现旋转后文本偏移到画布角落的问题
• 调用rotate()传入旋转弧度值（注意API接收的参数单位是弧度不是角度，角度转弧度公式为 角度值 * Math.PI / 180）
• 调用fillText()绘制文本，因为原点已经平移到目标位置，这里坐标填(0,0)配合文本对齐属性就可以精准控制位置
• 调用restore()恢复画布初始状态，避免后续绘制其他元素时继承旋转、平移的变换效果

完整可运行代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>静态旋转文本示例</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="textCanvas" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById('textCanvas');
        const ctx = canvas.getContext('2d');

        // 基础文本样式设置
        ctx.font = '24px sans-serif';
        ctx.fillStyle = '#333';
        // 设置文本对齐基准，让文本围绕中心点旋转
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // 保存初始画布状态
        ctx.save();
        // 把原点移动到画布中心位置，可自行修改为任意目标坐标
        ctx.translate(200, 150);
        // 旋转45度，传入换算后的弧度值
        ctx.rotate(45 * Math.PI / 180);
        // 绘制文本，原点已移到目标位置，从(0,0)位置绘制即可
        ctx.fillText('旋转45度的静态文本', 0, 0);
        // 恢复画布状态
        ctx.restore();

        // 绘制无旋转参考文本做对比
        ctx.fillText('正常无旋转的文本', 200, 250);
    </script>
</body>
</html>

上述代码打开即可直接看到效果，没有任何动画循环、逐帧重绘逻辑，页面加载完成后就会固定显示渲染结果。如果需要调整旋转角度，直接修改rotate()里传入的弧度值即可，比如要旋转90度就改成90 * Math.PI / 180，要逆时针旋转传入负的弧度值即可。

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