我正在构建一个带有 HTML5 画布 2D 上下文的正方形网格。我平移和缩放画布，使网格正方形的大小为一个单位，但未转换为 30 像素。这是一个由 30px 正方形组成的 10x10 网格示例。
这很好用，除了一件事：文本。
要为画布指定适合正方形的字体，我需要指定小于 1 的字体大小。
例如，“.5px sans-serif”应该是正方形大小的一半（即“15px sans-serif”代表 30px 未转换的正方形）。这至少在 Chrome 中失败了，并且画布恢复为更大的默认值。
我发现的唯一解决方案是在我绘制文本时撤消画布缩放，哎呀！
有没有办法通过亚像素字体规范来解决这个问题？（自然变换后，字体会是正常的大字体。亚像素字体大小仅相对于画布变换）
将字体大小设置为 0.5px 意味着字体是未转换的半像素。它不是一个比例值，而是一个绝对值。
因此，将字体大小指定为未缩放大小、缩放上下文、绘制文本和网格，然后可以选择移除缩放。
这个演示将展示这一点：
Scale demo
必不可少的部分：
ctx.font = '15px sans-serif';
ctx.scale(1/30, 1/30);
ctx.fillText('TEXT', 5, 5);
ctx.strokeRect(0, 0, 30, 30);
这个例子将在左上角产生一个小点。
在认为这很困难之后，我意识到有一个使用转换的简单解决方案。
考虑到上下文当前正在以一种复杂的方式进行转换，我想在给定的位置绘制文本(tx,ty)。您唯一需要知道的是当前比例，(scaleX,scaleY)（无论如何您都需要知道它来计算分数字体大小。然后您可以翻译（在转换后的坐标系中），然后取消缩放并绘制文本：
ctx.save();
ctx.translate(tx, ty);
ctx.scale(1/scaleX, 1/scaleY);
ctx.fillText("Some String", 0, 0);
ctx.restore();
如果您需要对文本大小进行任何数学运算，可以在“未缩放”坐标中完成。
坦率地说，亚像素字体大小毫无意义。相反，您可能想要完全删除文本，或者用小直线“希腊化”它以指示文本行。以某个已知的标准大小使用 measureText() 来为每行获取适当的相对长度，然后只需绘制一条细直线来指示（不可读）文本的存在。