画布context.fillText可以变得清晰（因为context.translate 0.5 / 0.5不会）

作者: 苞米地里的蒙面妖
发布时间: 2025-01-13 01:23:20 (1月前)
转自：

3 条回复

0#
回复此人
诸葛神侯 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <BLOCKQUOTE> <P> 因此，我现在想知道的主要问题是，是否存在一种（正常，快速）方式使浏览器将文本绘制为具有相同的清晰度，因为它只是在放置文本时将文本绘制到页面。 </p> </BLOCKQUOTE> <P> 简单的回答很可悲。不同的浏览器目前正在以截然不同的方式实现文本的子像素渲染/消除锯齿，这导致（对于某些浏览器）它们呈现的HTML页面文本看起来很好但是它们的Canvas文本看起来很糟糕。 </p> <P> 一种可能性是预渲染所有文本（即使这意味着将其写在HTML页面上并截取屏幕截图）并使用 <code> drawImage </code> 。这也有比呼叫快得多的好处 <code> drawText </code> ，但当然不是很有活力。 </p> </DIV>

编辑
1#
回复此人
土豆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 虽然这个问题很老，但我遇到了同样的问题。在挖掘FireFox时，我找到了一个用于画布的旗帜：mozOpaque。设置后，字体使用正确的LCD渲染，文本像页面上的其他元素一样清晰。要测试它，只需： </p> <pre> <code> canvas.mozOpaque = true; </code> </pre> <P> 画布创建后。有一个问题：画布不再是透明的，但它不是我使用的问题。可能是Chrome / Safari / IE得到了类似的东西。我希望这有帮助！ </p> </DIV>

编辑

登录后才能参与评论