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

问题是ctx.fillText()产生的文字比正常网页中显示的文字要模糊不清。在this example中，右侧的文本在画布上生成，左侧仅使用html。它来自这个问题Can canvas context.fillText be made crisp (because context.translate 0.5/0.5 doesn't)，但没有回答这个问题，现在可能已经过时。在清晰的画布上绘制更清晰的文字

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

来源

2015-01-26 user17739521

我试过的一件事是通过使画布宽度/高度= 4倍的正常大小和风格它增加dpi（sorta）正确的尺寸。像''canvas width =“400”height =“400”style =“width：100px; height：100px”>“;'我通过一个DPI变量做了这个变量，它在绘制时与我的大部分宽度/所以我仍然可以以1：1的比例思考，但让'var dpi = 4;'为我做整个画布上的所有缩放，不知道它是否会帮助你。 – 2015-01-26 20:32:36

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

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

作为Windows上的图示：

这是Sciter字体呈现于固体背景： enter image description here 这是相同的文档，但与背景：透明（Aero的Windows 7）

固背景使用ClearType（使用“在浏览器中的新标签打开图像”）

来源

2015-01-26 20:50:24

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

回答

相关问题