2

グラフの x 軸のテキストを回転させたい。以下は私が使用しているコードです

context.rotate(20*Math.PI/2);
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200); 
context.rotate(-20*Math.PI/2);

テキストを書いた後、元の位置に戻しています。しかし、どういうわけかそれは機能していません。作業コードはhttp://intercepter.comli.com/example3.htmlにあります。

この記事を読んで試してみましたが、うまくいきません。私を助けてください

4

1 に答える 1

2

回転すること20*Math.PI/2は、何も回転しないことに似ています。

20*Math.PI/2 = 10*Math.PI = 2*Math.PI

テキストをどのように回転させたいかわからないが、代わりに

context.rotate(20*Math.PI/2);
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200); 
context.rotate(-20*Math.PI/2);

次のような変換を使用してみてください。

context.save();
context.setTransform(1,0,0,1,0,0);
context.translate(startX + (i * barWidth) + barWidth/2, chartHeight - 10); 
context.rotate(-Math.PI/2);

context.fillText(name, 0, 0, 200);        
context.restore();

動作中のデモを参照してください：

于 2012-06-10T16:09:50.047 に答える