使用html5畫布繪製垂直文字

Question

我正在用HTML5畫布開發圖表PoC。

每個文字的AA，BB等都是畫布。我通過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變換正確定位旋轉後您的文本，玩轉換直到你弄清楚它們是如何工作的（如果你知道你的矩陣，你可以跳過這一步）