text - 如何在给定右下角 x,y 的 html-5 Canvas 上绘制文本

Question

有谁知道如何在给定右下角 x,y 坐标的 html-5 Canvas 上绘制文本？ .fillText("text", x, y) 在 x,y 处绘制文本的左上角我需要它在 x,y 处绘制右下角。如果有人知道答案，那将非常有帮助。

Answer 1

使用度量文本宽度获取宽度

var width = ctx.measureText("text");

并且(如果你需要的话)你可以通过使用你的字体大小来获得大概的高度

ctx.font = "25px serif";
var height = parseInt(ctx.font.substring(0, 2)); // gets the font size

因为它呈现在左下角，所以你只需要减去它

ctx.fillText("text", x - width, y);