在不旋轉整個畫布的情況下在畫布上打印傾斜文本

Question

如何以某個角度填充文本而不必在整個畫布上使用rotate（）函數。類似於

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

Answer 1

只需使用保存和恢復以確保整個畫布不會受到您的操作的影響。

假設你想從文本的中間旋轉，你必須確保文本的右對齊，如@markE mentionned作爲程序的最簡單的方法：

jsfiddle.net/m1erickson/c6kKn

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

輸出如下：