canvas - 缩放后的 HTML5 Canvas 中的字体大小小于 1

Question

我正在使用 HTML5 Canvas 2D 上下文构建正方形网格。我平移并缩放 Canvas ，使网格方 block 的大小为一个单位，但为 30px，也就是说，未转换。 Here's an example由 30 像素正方形组成的 10x10 网格。

除一件事外，这工作正常:文本。

要为适合正方形的 Canvas 指定字体，我需要指定小于 1 的字体大小。

例如，“.5px sans-serif”应该是正方形大小的一半(即“15px sans-serif”表示 30px 未转换的正方形)。这会失败，至少在 Chrome 中是这样，并且 Canvas 会恢复为更大的默认值。

我找到的唯一解决方案是在绘制文本时撤消 Canvas 缩放，糟糕!

有没有办法通过亚像素字体规范来解决这个问题？ (自然转换后字体会是正常的大字体，亚像素字体大小只是相对canvas转换而言的)

Answer 1

将字体大小设置为 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);

Example demo

这个例子会在左上角产生一个小点。