1

这听起来可能很简单，但相信我，我已经搜索了高低没有结果。

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

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

我现在需要让这个文本处于垂直方向。注意：此文本出现在具有我不打算旋转的其他对象的画布中，因此旋转画布不是我正在寻找的解决方案。

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

像这样：CSS 旋转文本 - 复杂，但是这个例子有 html 中的文本，所以它有命名标签来引用文本。我的文字没有名称标签（或者我可以添加它吗？）所以我有点卡在那里。

4

2 回答 2

1

您可以使用save()andrestore()将转换限制为文本：

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/

于 2013-06-08T09:46:41.143 回答
0

怎么样：

.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)";
}
于 2013-06-08T02:13:59.177 回答