javascript - 在清晰的 Canvas 上绘制更清晰的文字

Question

问题在于 ctx.fillText() 生成的文本比普通网页中显示的文本模糊得多。在 this example ，右侧的文本是在 Canvas 上生成的，左侧的文本仅使用 html。它取自这个问题 Can canvas context.fillText be made crisp (because context.translate 0.5/0.5 doesn't)但这个问题没有答案，该帖子现在可能已经过时了。

我只需要将文本输出到一个清晰的 Canvas 上，我希望提高文本的质量。如果可以使文本更清晰，我愿意逐个像素地做事。问题是我不知道从哪里开始。

Answer 1

取决于浏览器:左侧的文本使用标准的 ClearType 呈现方式呈现(至少在 Windows 上)。右边的字体抗锯齿是灰度。 ClearType 在背景不透明时起作用。

所以尝试用一些不透明的颜色填充 Canvas 。如果这不起作用，那么这是特定引擎的特定字体渲染。

作为 Windows 上的插图:

这是 Sciter 在纯色背景上的字体渲染: 这是同一份文件，但背景是透明的(Aero Windows 7)

纯色背景使用ClearType(使用“在浏览器的新标签页中打开图片”)