JavaScript CSS旋轉文字方向

Question

這聽上去很簡單，但請相信我，我搜索過很多次而沒有結果。

我已經在JavaScript中創建了動態文本，如下所示：

    context.fillText('name', 10, 10, 20);

現在，我需要以垂直方向顯示此文本。 注意：此文本出現在包含我不打算旋轉的其他對象的畫布中，因此旋轉畫布不是我想要的解決方案。

我對使用CSS的解決方案感到滿意-原因是我可能希望將此角度和顏色屬性應用於畫布上的多個文本。 我是使用CSS的新手，所以我不知道如何創建它，無法識別此文本以將其應用到JavaScript中。

諸如此類： CSS旋轉文本-復雜 ，但是本示例在html中包含文本，因此它具有命名標簽來引用文本。 我的文字沒有名稱標簽（或可以添加名稱標簽嗎？），所以我有點卡在其中。

Answer 1

您可以使用save()和restore()將轉換限制為文本：

c = canvas.getContext("2d");
c.save(); // save the current styles and transformations
c.translate(20, 50); // move origin to (20, 50)
c.rotate(-Math.PI / 2); // rotate 90 degrees anticlockwise about origin
c.fillText("name", 0, 0); // draw the text vertically
c.restore(); // restore previous styles and transformations

演示： http ： //jsfiddle.net/chtJ2/

Answer 2

怎么樣：

.fillText {
     -moz-transform: rotate(7.5deg);  
       -o-transform: rotate(7.5deg);  
  -webkit-transform: rotate(7.5deg);  
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); 
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}