html5 canvas：fillText的maxWidth参数在Chrome中产生丑陋的结果

Question

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

这里是用于示例的代码：

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);

（编辑：simpler repro） 要复制，您可以转到here并查看右下角的框。

更新：原始问题表明firefox中也存在问题。那是一个错误。这个问题似乎只出现在chrome中。

Answer 1

你的基本问题是maxWidth对渲染文本执行缩放，但是大多数文本不能很好地缩放到非整数大小...基本上，如果你要求7.9px​​字体，那么就不适合像素网格很好，看起来很难看。

在避免它方面...除了使用更高的DPI显示（我知道并非真正在你的控制范围内）之外，没有那么多你可以做的就是避免使用API​​。 ：（