画布中的抗锯齿大文本

Posted 2023-03-05

【中文标题】画布中的抗锯齿大文本

【英文标题】：anti-aliased large text in canvas

【发布时间】：2013-03-26 23:38:34

【问题描述】：

如何让 Chrome（左侧）使用像 IE 10（右侧）这样的抗锯齿功能？

到目前为止，我使用了this 代码。我需要用细笔划吗？

【问题讨论】：

您可以使用 2 倍大小的屏幕外画布来绘制文本，然后 getImage() 将其缩小。 Credit.

【参考方案1】：

您可能需要等待更长时间。 Chrome canary v28 的抗锯齿效果仍然很差fiddle。

ctx.font = '72pt Arial';
ctx.fillText('Iowa 6', 0, 50);

【讨论】：

在版本中仍然很糟糕：30.0.1599.101 :(

【参考方案2】：

简短的回答是您无法控制抗锯齿。

好消息是它在 Chrome 27.0.1453.12 dev-m 中看起来好多了：

不幸的是，您要么必须“等待”，要么使用图像而不是 fillText。

Canvas 规范的文本部分是在大多数浏览器中最后实现的，它显示出来了。