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

Question

我已经成功地能够在HTML5 canvas元素上填写文本，但是对于旋转后的文本却无法做到这一点。

以下是相关的代码段：

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)