HTML5文本旋转

Question

我想旋转的图形的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

我已经通过this article并尝试过，但它只是不工作。请帮我出

Answer 1

通过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); 

你可以尝试使用transformations这样的：

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(); 

硒e工作DEMO：