Chrome Canvas中的子像素渲染

Question

我想知道是否有人知道是否可以在Chrome（和/或Safari）的HTML5画布中启用子像素渲染。

Chrome在HTML中进行子像素渲染，而FF则用于HTML和HTML。画布渲染。具体问题如下图所示：

Answer 1

简短回答：不。不可能

这是使很多Canvas用户感到沮丧的两个主题之一。

任何类型的子像素渲染/消除锯齿取决于浏览器。这意味着不同的浏览器倾向于以不同的方式呈现事物。

很多人要求抗锯齿是一个可以针对特定环境打开或关闭的选项。没有这样的运气。

Chrome尤其需要密切关注，因为他们处理子像素渲染的方式在过去4个月内发生了巨大变化。如果您开始使用Chrome developer channel，您将会预览他们不断尝试的内容。他们在这个领域做过相当多的测试，甚至推动了我complained about.

的一些剧烈的倒退变化。

这里的内容是：

1. 关于子像素渲染，Chrome绝对“尚未完成”。这很糟糕，但现在最好的选择是等待一段时间。
2. 规范需要在这个领域更加具体，因此浏览器之间存在一定的一致性，因为现在任何子像素渲染/抗锯齿都与浏览器有关。我在2008.中对此进行了未解决的讨论。自那以后我没有任何进展。

Answer 2

我不相信这是可能的。

这是一个难题，因为canvas为用户提供了如此多的低级控制。如果canvas开始做这样的智能事情，它可能会破坏用户期望的其他功能。

考虑其他图形元素的子像素渲染 - 根据应用程序，程序员可能不希望这样，并且你当然不希望子像素渲染任意地为整个元素打开作为一个全有或全无的命题。想象一下获得特定像素的颜色 - 这里的答案是正确的吗？画布应该躺下并返回预期的颜色，或者返回实际的颜色（所以我们必须在这里整天回答问题“为什么这个像素我变成黑色被测量为暗红色？”）。

有些人会说Firefox在这里做错了。

Answer 3

这是一种为任何画布内容（文本，图像，矢量等）进行子像素渲染的方法。 http://johnvalentine.co.uk/subpixel-html5-canvas.htm

  

方法概要

     

它绘制到画布上，然后将其绘制到屏幕上以利用RGB条纹子像素。它也适用于alpha通道。请注意，如果您使用纵向显示，无条纹像素，或者浏览器显示的分辨率低于显示器，则可能无法使用此功能。

可以进行微调，但对于一种简单的方法来说，这是一个很大的收获。它适用于我测试的所有浏览器，但仅限于画布到屏幕的像素比为1：1（但我相信已经提供了解决方案）。

Answer 4

有可能，具体取决于平台。这是操作方法：

1. 使用canvas.getContext('2d', {alpha: false})创建不透明的画布上下文
2. 将-webkit-font-smoothing属性设置为所需的值：auto，antialias（模糊），subpixel-antialias（带有彩色条纹的“ LCD”文本）或{{1 }}。

这将应用于画布中的所有文本。

以下是Mac上的Chrome 81的屏幕截图；绿色矩形中的文本是画布none：

以下是此文件的来源：

fillText