html5-canvas - 使用 html5 画布绘制图表的垂直文本

Question

我正在使用 HTML5 画布开发图表 PoC。

每个文字AA、BB等都是canvas。我通过 h 生成它们var canvas = $("<canvas></canvas>").appendTo(elementDiv);并使用循环来显示文本。

我ctx.fillText(txt, x - txt.length * 2, 18);用来显示文本。

在这里，我的问题是如何使它们成为垂直文本。

Answer 1

要将文本转换为垂直文本，您只需使用该rotate方法将旋转变换应用于您的画布：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations#Rotating

您可能还需要translate变换以在旋转后正确定位文本，玩转变换直到弄清楚它们是如何工作的（如果您知道矩阵，则可以跳过此步骤）