旋转上下文不适用于 HTML5 画布文本

Question

我已经成功地在 HTML5 画布元素上填充文本，但无法为旋转文本做同样的事情。

以下是相关代码sn-ps：

ctx.fillStyle = 'white'
ctx.font = '15px Arial'
...
ctx.fillText('50',232,190)
ctx.fillText('40',272,190)
ctx.fillText('30',312,190)
ctx.fillText('20',352,190)
ctx.fillText('10',392,190)

/* Everything above this point is rendered perfectly */

ctx.save()
ctx.rotate(Math.PI/2)

ctx.fillStyle = 'orange'
ctx.font = '15px Arial'
ctx.textAlign = 'left'
ctx.fillText('10',32,190)
ctx.restore()

我用这篇文章作为参考：https://newspaint.wordpress.com/2014/05/22/writing-rotated-text-on-a-javascript-canvas/

上述代码生成的图像（其他对理解此问题不重要的画布渲染代码已省略）：

我已尝试多次清除缓存，但仍然是相同的输出，没有显示任何旋转的文本。

Answer 1

我找到了原因。事实证明我需要翻译文本，因为 Pi/2 弧度的旋转使它超出了画布。通过在渲染所有旋转文本之前添加以下内容来纠正实现：

ctx.rotate(Math.PI)
ctx.translate(-480,-72)