canvas 绘制文字,浏览器缩放时文字位置改变了，坐标不固定

Canvas上绘制的文字默认会随着浏览器缩放而保持其像素大小，这意味着当你调整浏览器窗口的缩放比例时，文字的位置可能会相对于画布的像素坐标发生变化，因为它们不是基于CSS的相对单位（如em或rem）。如果你希望文本在缩放时依然保持原始位置不变，可以采取以下策略：

1. 使用`context.measureText()`预计算文本长度，并存储实际宽度。然后，在绘制时根据新的视口大小调整x坐标。

const text = 'Hello';
const ctx = canvas.getContext('2d');
let originalWidth;

// 在页面加载或缩放前测量文字
originalWidth = ctx.measureText(text).width;
ctx.fillText(text, initialX - originalWidth / 2, initialY);

2. 使用CSS样式设置canvas元素的`transform`属性，比如`perspective`或`transform-origin`，使其在缩放时看起来像是文字本身在维持位置。

3. 如果你需要更精确的控制，可以创建一个固定的容器，并将文本作为内联元素（如`<span>`），然后将这个容器的大小和位置映射到canvas上。

<div id="canvasContainer">
  <span id="text">Hello</span>
</div>

#canvasContainer {
  perspective: 1px; /* 添加透视效果模拟固定尺寸 */
}

#text {
  position: absolute; /* 使文本脱离文档流 */
}

const canvas = document.getElementById('canvas');
const container = document.getElementById('canvasContainer');
container.style.transform = `scale(${window.devicePixelRatio}, ${window.devicePixelRatio})`; // 根据设备像素比缩放

// 绘制时获取文本元素的实际位置并转换到canvas
const textRect = text.getBoundingClientRect();
const canvasX = initialX - textRect.width / 2;