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：