js context.fillText 征对不同长度右边对齐的解决办法

在HTML5 Canvas中，要实现文本右对齐并且与不同长度文本互不重叠，可以通过测量文本宽度，并基于文本宽度设置x坐标来实现。

以下是一个简单的JavaScript函数，用于在Canvas中右对齐并且不重叠地绘制文本：

function drawRightAlignedText(context, text, x, y) {
    // 测量文本宽度
    const textWidth = context.measureText(text).width;
    // 设置x坐标为x值减去文本宽度，以实现右对齐
    const rightAlignedX = x - textWidth;
    // 使用fillText方法绘制文本
    context.fillText(text, rightAlignedX, y);
}

// 使用示例
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

// 设置文本样式
context.font = '20px Arial';
context.fillStyle = 'black';

// 调用函数绘制文本
drawRightAlignedText(context, 'Hello', 200, 20);
drawRightAlignedText(context, 'World', 200, 60);

在这个例子中，drawRightAlignedText函数接受context、text、x和y作为参数，其中x是预期的文本开始的水平位置。函数内部，measureText方法用于计算文本的宽度，然后通过计算新的x坐标值来实现右对齐。最后，使用更新后的x坐标值调用fillText方法绘制文本。这样，不同长度的文本将根据它们自己的宽度右对齐，并且互不重叠。