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 之外你无能为力。 :(
关于javascript - html5 Canvas : maxWidth argument to fillText produces ugly results in Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14223851/