전체 캔버스를 회전하지 않고 캔버스에 기울어 진 텍스트를 인쇄하십시오.

Question

전체 캔버스에서 rotate() 함수를 사용하지 않고 텍스트를 특정 각도로 어떻게 채울 수 있습니까? 예 :

ctx.fillText("Hi", x, y, AngleRadian); 

Answer 1

전체 캔버스가 작업의 영향을받지 않도록 저장 및 복원을 사용하십시오.

jsfiddle.net/m1erickson/c6kKn

: @markE가 진행하는 가장 쉬운 방법으로 했나요 당신은 텍스트의 중간에서 회전 할 가정

, 당신은 텍스트의 오른쪽 정렬을 확인해야

function fillTextRotated(text, x, y, angle) { 
    ctx.save(); 
    ctx.translate(x, y); 
    ctx.rotate(angle); 
    ctx.textAlign = "center"; 
    ctx.fillText(text, 0, 0); 
    ctx.restore(); 
} 

fillTextRotated("Hi everyone here", 50, 150, Math.PI/6); 

출력과 같이 보인다 :