HTML5的canvas元素上的子像素消除锯齿的文本 [英] Subpixel anti-aliased text on HTML5's canvas element

问题描述

我有点困惑的方式canvas元素反别名文本，希望你们都可以帮助。

I'm a bit confused with the way the canvas element anti-aliases text and am hoping you all can help.

在下面的截图中，顶部的Quick Brown Fox是一个H1元素，底部的是一个canvas元素，文本呈现在它上面。请注意，H1元素与背景更好地混合：

In the following screenshot the top "Quick Brown Fox" is an H1 element and the bottom one is a canvas element with text rendered on it. On the bottom you can see both "F"s placed side by side and zoomed in. Notice how the H1 element blends better with the background:

这是我用来渲染画布文本的代码： / p>

Here's the code I'm using to render the canvas text:

        var canvas = document.getElementById('canvas');
        if (canvas.getContext){

            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.fillText('Quick Brown Fox', 0, 26);
        }

是否可以以某种方式在canvas上渲染文本看起来与H1元素完全相同？

Is it possible to render the text on the canvas in a way so that it looks identical to the H1 element? And why are they different?

推荐答案

回答自己的问题：

可以使用本网站上展示的技术：

It is possible using the technique demonstrated on this site:

https://bel.fi/alankila/lcd/

唯一的问题是它在生产应用中太慢。如果有人跑得更快，请让我知道。

The only problem is that its too slow to implement in a production app. If anyone runs across a faster way please let me know.

这篇关于HTML5的canvas元素上的子像素消除锯齿的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！