在画布上打印倾斜文本而不旋转整个画布

Question

如何以一定角度填充文本，而无需在整个画布上使用rotate（）函数。像

这样的东西

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

Answer 1

只需使用保存和恢复，以确保整个画布不会受到您的操作的影响。

假设你想从文本的中间旋转，你必须确保正确对齐文本，正如@markE所提到的最简单的处理方式：

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

输出如下：