Question

这可能听起来很简单但是相信你我已经搜索过高而低的结果。

我在JavaScript中创建了动态文本，如下所示：

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

我现在需要将此文本置于垂直方向。注意：此文本显示在画布中，其中包含我不打算旋转的其他对象，因此旋转画布不是我要寻找的解决方案。

我会对使用css的解决方案感到满意 - 原因是我可能想要将此角度和颜色属性应用于画布上的多个文本。我是新手使用css所以我无法弄清楚如何创建它，识别此文本以将其应用于JavaScript中的内嵌。

像这样的东西：CSS rotate text - complicated，但是这个例子的文本是html，所以它命名了tag来引用文本。我的文字没有名称标签（或者我可以添加吗？）所以我有点卡在那里。

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)";
}

JavaScript CSS旋转文本方向

2 个答案: