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);
(编辑:更简单的复制)
要进行复制，您可以转到here并查看右下角的框。
更新:原始问题指出Firefox中也存在问题。那是一个错误。该问题似乎仅在Chrome中存在。
最佳答案
您的基本问题是maxWidth在渲染的文本上执行缩放，但是大多数文本不能很好地缩放到非整数大小...基本上，如果您要求使用7.9px字体，则该像素将无法很好地适应像素网格，并且看起来很丑。
在避免它方面...除了使用更高的DPI显示(我知道这并不是真正在您的控制之下)之外，避免API可以做很多事情。 :(