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

Question

有没有人知道在给定其右下角x，y坐标的情况下如何在html-5画布上绘制文本？ .fillText（“ text”，x，y）在x，y处绘制文本的左上角，我需要在x，y处绘制文本的右下角。如果有人知道答案，那将非常有帮助。

Answer 1

使用measureText（）函数。

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

Answer 2

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

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