Javascript 在画布上渲染灰色文本看起来很糟糕

为什么在画布上渲染灰色文本看起来非常糟糕？在我的例子中，第一段文字看起来很棒，第二段看起来很糟糕，第三段看起来还可以

以下是我看到的屏幕截图：

var g=document.getElementById（'canvas'）.getContext（'2d'）；
g、 font=“12px arial”；
g、 fillStyle=“#bbbbbbbb”；
g、 fillText（“这是一些示例文本（画布，灰色）”，0,30；
g、 fillStyle=“黑色”；
g、 fillText（“这是一些示例文本（画布，黑色）”，0，60）
div{
字体系列：“arial”；
字体大小：12px；
颜色：#bbbbbb；
}
这是一些示例文本。（多姆，灰色）
糟糕的文本渲染修复
哦，你找到了神奇的颜色组合。把它放在画布问题的长长列表上

注意我只在Chrome上发现了这个问题，Firefox没有问题。我不能使用Edge，因为它会使我的笔记本电脑过热，导致关机。所以我不知道Edge

原因是画布是透明的，标准规定必须将完全透明的像素进行alpha倍增，使其变为黑色（这是为了阻止哑图像编码器对看不见的透明颜色信息进行编码）。渲染器认为画布下的是黑色，因为这是透明像素的颜色

如何修复

有三种解决方案，第二种方案不起作用

我可以想到两种解决方案，它们只涉及不到100行代码

先在背景上画一条线，然后在上面画文字

我认为第二个解决方案是用非常低的alpha值绘制一个轮廓。但这仍然会拾取坏的预乘透明黑色

第三种方法是用文本颜色填充画布，然后将comp模式设置为“destination in”，然后绘制文本。这允许您在文本下仍保留透明像素

显示代码的代码段。
var g=document.getElementById（'canvas'）.getContext（'2d'）；
g、 font=“12px arial”；
g、 fillStyle=“#bbbbbbbb”；
g、 fillText（“非常糟糕的文本呈现”，0,12）；
var g=document.getElementById（'canvas1'）.getContext（'2d'）；
g、 font=“12px arial”；
g、 fillStyle=“#f3f5f6”
g、 fillRect（0,0，g.canvas.width，g.canvas.height）；
g、 fillStyle=“#bbbbbbbb”；
g、 fillText（“固定为实心背景”，0,12）；
var g=document.getElementById（'canvas2'）.getContext（'2d'）；
g、 font=“12px arial”；
g、 strokeStyle=“rgba（“+0xf3+”、“+0xf5+”、“+0xf6+”，0.05）”；
g、 线宽=2；
g、 lineJoin=“round”；
g、 strokeText（“尝试像素轮廓”，0,12）；
g、 fillStyle=“#bbbbbbbb”；
g、 fillText（“尝试使用像素轮廓”，0,12）；
var g=document.getElementById（'canvas3'）.getContext（'2d'）；
g、 font=“12px arial”；
g、 fillStyle=“#bbbbbbbb”；
g、 fillRect（0,0，g.canvas.width，g.canvas.height）；
g、 globalCompositeOperation=“目的地在”；
g、 fillText（“在文本颜色上与comp op目的地固定”，0,12）；
g、 globalCompositeOperation=“源代码结束”
div{
字体系列：“arial”；
字体大小：12px；
颜色：#bbbbbb；
背景#f3f5f6；
}
这是一些示例文本。（多姆，灰色）

我没有看到任何异常。在这种情况下，你对“糟糕”的定义是什么？克里斯，我刚刚用截图更新了帖子。这是什么操作系统？什么浏览器？是否确实安装了Arial？看起来不错。无法用您提供的代码复制有缺陷的文本。FWIW，它看起来像是双面画的。这是系统相关的，是ClearType消除混叠（或在Mac上：“LCD字体平滑”）的产物。调整系统设置以使用不同的抗锯齿，以查看其是否更改。不过，您不能对此做太多，因为这是浏览器选择以这种方式应用的内容（或底层文本引擎）。顺便说一句，它看起来很好，否则绘制背景的解决方案似乎工作得很好。看起来仍然没有DOM渲染那么好。知道如何让它看起来和DOM一样好吗？还有，我想念JSFIDLE。自从stackoverflow切换到新的“代码片段”后，您就不能再编辑和播放其他人的代码。有没有一种方法可以处理一个片段或者它是只读的？@satnam这个答案可以改进文本，但没有完美的解决方案。就我个人而言，我将文本渲染到画布上，然后将其处理到死角，从而生成非常高质量的位图文本。但这只会得到否决票（位图文本不能是这个那个等…），所以上面的链接是我最好的。至于尝试代码，只需单击“将代码段复制到答案”即可在该答案中使用该代码，完成后放弃该答案。