HTML5 画布元素上的亚像素抗锯齿文本 [英] Subpixel anti-aliased text on HTML5's canvas element

问题描述

我对画布元素抗锯齿文本的方式有些困惑，希望大家能提供帮助.

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 元素，底部是一个带有文本渲染的画布元素.在底部，您可以看到并排放置并放大的两个F".注意 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:

这是我用来渲染画布文本的代码:

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);
        }

是否可以以某种方式在画布上渲染文本，使其看起来与 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?

推荐答案

现在可以通过创建不透明的画布上下文来获得亚像素字体渲染.在 Safari 和 Chrome 中，您可以使用以下代码段获得:

It's now possible to get sub-pixel font rendering by creating an opaque canvas context. In Safari and Chrome you can get this using this snippet:

var ctx = canvas.getContext("2d", {alpha: false})

我是从这篇博文中找到的.

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