canvas 绘制的文字不变形

Canvas 是HTML5提供的一种绘图API，用于在网页上动态生成图像。当你在Canvas上绘制文字时，如果不希望文字发生变形，你可以通过以下几个步骤来实现：

1. 设置正确的字体属性：使用`font`属性指定字体大小、风格和家族，例如 `context.font = '16px Arial';`。保持一致的字体可以使文本始终保持原始样式。

2. 使用`textAlign`和`textBaseline`控制文本对齐方式：分别设置水平对齐(`textAlign`)如`left`, `center`, `right`，以及垂直对齐(`textBaseline`)如`top`, `middle`, `bottom`。

3. 避免缩放变换：如果你之前进行了canvas的缩放操作（如`scale()`），记得在绘制文字前还原到100%的比例。

4. 预防用户交互引起的意外：如果文字位于鼠标可交互区域，可以考虑将文字置于非用户交互层，或使用`stopPropagation()`阻止事件冒泡导致的文字改变。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

// 设置字体属性
context.font = '16px Arial';

// 绘制文本
context.fillText('Hello, World!', 10, 50);