Question

我正在使用HTML5画布2D上下文构建一个正方形网格。我翻译＆amp;缩放画布，使得网格方块的大小为一个单位，但是是30px，比如说，未转换。 Here's an example 10x10网格的30px正方形。

除了一件事之外，这个工作正常：文本。

要为适合广场的画布指定字体，我需要指定小于1的字体大小。

例如，“。5px sans-serif”应该是正方形尺寸的一半（即对于30px未转换的正方形，“15px sans-serif”）。这失败了，至少在Chrome中，画布恢复到更大的默认值。

我发现的唯一解决方案是在绘制文本时撤消画布缩放，yuk！

有没有办法通过亚像素字体规格来解决这个问题？（自然在转换后，字体将是一个理智的大字体。子像素字体大小只相对于画布变换）

Answer 1

在认为这很难之后，我意识到使用变换有一个简单的解决方案。

考虑到目前的上下文是以复杂的方式转换的，我想在给定的位置(tx,ty)绘制文本。您唯一需要知道的是当前比例(scaleX,scaleY)（您无论如何都需要知道它来计算小数字体大小。然后您可以翻译（在变换后的坐标系中）然后取消定标并绘制文本：

ctx.save();
ctx.translate(tx, ty);
ctx.scale(1/scaleX, 1/scaleY);
ctx.fillText("Some String", 0, 0);
ctx.restore();

如果您需要进行与文本大小相关的任何数学运算，可以在“未缩放”坐标中完成。

Answer 2

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

此示例将在左上角产生一个小点。

Answer 3

坦率地说，亚像素字体大小毫无意义。您可能希望完全删除文本，或者用“小希望”将其删除，以指示文本行。在某个已知的标准大小上使用measureText（）来获得每条线的适当相对长度，然后只绘制一条直线，指示是否存在（不可读）文本。

缩放的HTML5画布中的字体大小小于1

3 个答案: