如何在给定右下角x，y的html-5画布上绘制文本

Question

有人知道如何在给定右下角x，y坐标的html-5画布上绘制文本吗？.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);

Answer 2

使用measureText()函数。

const width = context.measureText("text").width;
const height = context.measureText("text").height;
context.fillText("text", x - width, y - height);