3

fillText的 maxWidth 参数可用于限制文本呈现的最大宽度，但是，在 chrome 中，我有时会得到非常奇怪的结果。这是一个特别糟糕的例子，我需要将文本的宽度限制为几个像素。以上是对未指定 maxWidth 的 fillText 的调用。下面的例子有一个 maxWidth。“w”和“a”之间的空格太大。是否有任何技巧或解决方法可以获得更好的结果？

这是用于示例的代码：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="8pt Arial";
ctx.fillText("Iowa", 10, 40);
ctx.fillText("Iowa", 10, 56, 21);

（编辑：更简单的复制）要复制，您可以到这里查看右下角的框。

更新：最初的问题表明 Firefox 也存在问题。那是一个错误。这个问题似乎只存在于 chrome 中。

4

1 回答 1

1

您的基本问题是 maxWidth 对呈现的文本执行缩放，但大多数文本不能很好地缩放到非整数大小......基本上，如果您要求 7.9px​​ 字体，那么东西将不适合像素网格并且会看起来很丑。

就避免它而言……除了使用更高的 DPI 显示器（我知道，这不是你真正能控制的）之外，除了避免 API 之外，你无能为力。:(

于 2013-01-09T05:06:02.367 回答