javascript - 在 Canvas 上打印倾斜文本而不旋转整个 Canvas

Question

如何以一定 Angular 填充文本，而无需在整个 Canvas 上使用旋转()函数。类似的东西

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

Answer 1

只需使用保存和恢复即可确保整个 Canvas 不会受到您的操作的影响。

假设您想从文本中间旋转，则必须确保文本右对齐，正如 @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); 

输出看起来像: