我想知道是否有人知道是否可以在Chrome（和/或Safari）的HTML5画布中启用子像素渲染。Chrome在HTML中进行子像素渲染，FF在HTML和Canvas渲染中都进行子像素渲染。具体问题如下图所示：x1c 0d1x的数据
d4so4syb1#
简短回答：不不可能这是令许多Canvas用户感到沮丧的两个主题之一。任何类型的亚像素渲染/抗锯齿都取决于浏览器。这意味着不同的浏览器倾向于以不同的方式呈现事物。很多人都要求抗锯齿是一个选项，可以打开或关闭特定的上下文。还没有任何类似的运气。尤其是Chrome，你需要密切关注，因为他们处理亚像素渲染的方式在过去的4个月里发生了巨大的变化。如果你开始使用Chrome developer channel，你会得到他们不断尝试的东西的预览。他们已经在这方面做了相当多的测试，甚至推出了一些剧烈的回归变化，我已经这里的要点是：
huus2vyu2#
我认为目前这是不可能的。这是一个难题，因为canvas为用户提供了太多的底层控制。如果canvas开始执行这样的智能操作，它可能会破坏用户期望的其他功能。考虑其他图形元素的子像素渲染-根据应用程序的不同，程序员可能不希望这样做，而且您肯定不希望为整个元素任意打开子像素渲染，因为这是一个全有或全无的命题。想象一下，获取一个特定像素的颜色-这里的正确答案是什么？canvas应该说谎并返回预期的颜色，还是返回实际的颜色（所以我们必须在SO上回答一整天的问题，关于“为什么这个我做的黑色像素被测量为暗红色？”）“）.有些人会认为Firefox在这里做错了。
ejk8hzay3#
这里有一种对任何画布内容（文本、图像、矢量等）进行子像素渲染的方法。http://johnvalentine.co.uk/subpixel-html5-canvas.htm的数据。
它绘制到画布上，然后将画布绘制到屏幕上，以利用RGB条纹子像素。它也适用于Alpha通道。请注意，如果您使用纵向显示、非条纹像素，或者浏览器显示画布的分辨率低于显示器的分辨率，则此操作可能不起作用。有微调的余地，但对于一个简单的方法来说，这是一个很大的收获。它可以在我测试过的所有浏览器上运行，但只有在画布与屏幕像素比为1：1的情况下（但我相信已经提供了解决方案）。
dxpyg8gm4#
这是可能的，取决于平台。下面是如何做到这一点：1.使用canvas.getContext('2d', {alpha: false})创建不透明画布上下文1.将-webkit-font-smoothing属性设置为所需的值：auto、antialias（模糊）、subpixel-antialias（带有彩色条纹的“LCD”文本）或none。这将应用于画布中的所有文本。这是一个屏幕截图从Chrome 81在Mac上;绿色矩形中的文本是canvas fillText：x1c 0d1x的数据下面是该文件的源代码：
canvas.getContext('2d', {alpha: false})
-webkit-font-smoothing
auto
antialias
subpixel-antialias
none
fillText
<!DOCTYPE html> <style> canvas { border: 1px solid green; } div { position: float; float: left; } #a { -webkit-font-smoothing: auto; } #b { -webkit-font-smoothing: antialiased; } #c { -webkit-font-smoothing: subpixel-antialiased; } #d { -webkit-font-smoothing: none; } </style> <div id="a"> (auto)<br> ??????????<br> ||||||||||<br> IIIIIIIIII<br> llllllllll<br> //////////<br> </div> <div id="b"> (antialiased)<br> ??????????<br> ||||||||||<br> IIIIIIIIII<br> llllllllll<br> //////////<br> </div> <div id="c"> (subpixel)<br> ??????????<br> ||||||||||<br> IIIIIIIIII<br> llllllllll<br> //////////<br> </div> <div id="d"> (none)<br> ??????????<br> ||||||||||<br> IIIIIIIIII<br> llllllllll<br> //////////<br> </div> <script> 'use strict'; function add(container) { let canvas = document.createElement('canvas'); const width = container.clientWidth; canvas.style.width = `${width}px`; const height = 40; canvas.style.height = `${height}px`; canvas.width = Math.floor(width * window.devicePixelRatio); canvas.height = Math.floor(height * window.devicePixelRatio); container.append(canvas); let ctx = canvas.getContext('2d', {alpha: false}); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'black'; ctx.font = '12pt Arial'; ctx.fillText('\/!|hello world', 0, height / 2); } add(a); add(b); add(c); add(d); </script>
字符串
pdsfdshx5#
2023年，这是可能的。在获取Canvas上下文时，只需要指定alpha: false即可：
alpha: false
ctx = canvas.getContext("2d", {alpha: false});
字符串结果：
的数据
5条答案
按热度按时间d4so4syb1#
简短回答：不不可能
这是令许多Canvas用户感到沮丧的两个主题之一。
任何类型的亚像素渲染/抗锯齿都取决于浏览器。这意味着不同的浏览器倾向于以不同的方式呈现事物。
很多人都要求抗锯齿是一个选项，可以打开或关闭特定的上下文。还没有任何类似的运气。
尤其是Chrome，你需要密切关注，因为他们处理亚像素渲染的方式在过去的4个月里发生了巨大的变化。如果你开始使用Chrome developer channel，你会得到他们不断尝试的东西的预览。他们已经在这方面做了相当多的测试，甚至推出了一些剧烈的回归变化，我已经
这里的要点是：
1.规范需要在这方面更加具体，以便在浏览器之间保持一定的一致性，因为现在任何子像素渲染/抗锯齿都非常依赖于浏览器。在2008.中有未解决的讨论，从那以后我没有任何进展。
huus2vyu2#
我认为目前这是不可能的。
这是一个难题，因为canvas为用户提供了太多的底层控制。如果canvas开始执行这样的智能操作，它可能会破坏用户期望的其他功能。
考虑其他图形元素的子像素渲染-根据应用程序的不同，程序员可能不希望这样做，而且您肯定不希望为整个元素任意打开子像素渲染，因为这是一个全有或全无的命题。想象一下，获取一个特定像素的颜色-这里的正确答案是什么？canvas应该说谎并返回预期的颜色，还是返回实际的颜色（所以我们必须在SO上回答一整天的问题，关于“为什么这个我做的黑色像素被测量为暗红色？”）“）.
有些人会认为Firefox在这里做错了。
ejk8hzay3#
这里有一种对任何画布内容（文本、图像、矢量等）进行子像素渲染的方法。http://johnvalentine.co.uk/subpixel-html5-canvas.htm的数据。
方法概要
它绘制到画布上，然后将画布绘制到屏幕上，以利用RGB条纹子像素。它也适用于Alpha通道。请注意，如果您使用纵向显示、非条纹像素，或者浏览器显示画布的分辨率低于显示器的分辨率，则此操作可能不起作用。
有微调的余地，但对于一个简单的方法来说，这是一个很大的收获。它可以在我测试过的所有浏览器上运行，但只有在画布与屏幕像素比为1：1的情况下（但我相信已经提供了解决方案）。
dxpyg8gm4#
这是可能的，取决于平台。下面是如何做到这一点：
1.使用
canvas.getContext('2d', {alpha: false})创建不透明画布上下文1.将
-webkit-font-smoothing属性设置为所需的值：auto、antialias（模糊）、subpixel-antialias（带有彩色条纹的“LCD”文本）或none。这将应用于画布中的所有文本。
这是一个屏幕截图从Chrome 81在Mac上;绿色矩形中的文本是canvas
fillText：x1c 0d1x的数据
下面是该文件的源代码：
字符串
pdsfdshx5#
2023年，这是可能的。在获取Canvas上下文时，只需要指定
alpha: false即可：字符串
结果：
的数据