HTML5 画布字体大小

【问题标题】：HTML5 Canvas font sizeHTML5 画布字体大小
【发布时间】：2011-06-08 11:49:25
【问题描述】：

当我平移和缩放画布时，放在画布上的文本对应于画布比例。无论画布的比例如何，如何使其固定大小？

假设我有一个使用缩放的画布，所以即使大小是 640x480 像素，缩放也是 8x5 画布单位。如果我现在使用context.fillText，文本将是巨大的。我需要文本始终保持相同的视觉大小，比如 12 像素。

【问题讨论】：

【解决方案1】：

在绘制文本之前，您必须临时重置比例（也就是将转换矩阵设置回身份）。

// I have lots of transforms right now
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Will always draw text in normal scale
ctx.fillText("lalalala", x, y);
ctx.restore();
// Still have my old transforms

【讨论】：

这实际上是唯一的方法。除了缩放之外，在绘制文本时还会考虑旋转。所以垂直翻转的画布将有颠倒的字体。