在清晰的画布上绘制更清晰的文本

Question

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

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

Answer 1

取决于浏览器：左侧的文本使用标准ClearType渲染（至少在Windows上）呈现。在右侧字体上，抗锯齿是灰度级。当背景不透明时，ClearType可以正常工作。

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

作为Windows上的插图：

这是纯色背景上Sciter中的字体渲染： 这是相同的文档，但背景：透明（Aero Windows 7）

纯色背景使用ClearType（使用＆＃34;在浏览器的新标签页中打开图像＆＃34;）