JavaScript CSS旋转文本方向

JavaScript CSS rotate text direction

本文关键字：方向 文本 旋转 CSS JavaScript      更新时间：2023-09-26

这听起来可能很简单，但是请相信我，我到处找都没有结果。

我在JavaScript中创建了动态文本，如下所示: 
    context.fillText('name', 10, 10, 20);

我现在需要在垂直方向的文本。注意:这个文本出现在一个画布上，有其他对象，我不打算旋转，所以旋转画布不是我正在寻找的解决方案。

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

像这样:CSS旋转文本——很复杂，但是这个例子有html中的文本，所以它有命名标签来引用文本。我的文本没有名字标签(或者我可以添加吗?)所以我被困在那里了

您可以使用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/

如何:

.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)";
}
相关文章：