1

これは単純に聞こえるかもしれませんが、私が高低を検索しても結果が得られなかったと信じてください。

次のように、JavaScript で動的テキストを作成しました。

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

このテキストを縦向きにする必要があります。注: このテキストは、回転するつもりのない他のオブジェクトを含むキャンバスに表示されるため、キャンバスを回転させることは私が探している解決策ではありません。

css を使用するソリューションに満足しています。この角度と色の属性をキャンバス上の複数のテキストに適用したい場合があるからです。CSS を使用するのは初めてなので、作成方法がわかりません。このテキストを特定して、JavaScript のインラインに適用します。

このようなもの: CSS 回転テキスト - 複雑ですが、この例ではテキストが html にあるため、テキストを参照するタグに名前が付けられています。私のテキストには名前タグがありません (または追加できますか?)。

4

2 に答える 2

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/

于 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 に答える