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);
(编辑:更简单的复现) 要进行复现,您可以在这里查看右下角的框。
更新:最初的问题还提到了火狐浏览器存在问题,但那是一个错误。该问题似乎只存在于谷歌浏览器中。