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

을 통해 확인하고 시도했지만 시도하지 않았습니다. 20*Math.PI/2에 의해 회전하는 '원인 아무것도 회전하지 유사하다

Answer 1

밖으로 제발 도와주세요 :

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 :