在 Canvas 上绘制的文本抗锯齿效果不佳 [英] Poor anti-aliasing of text drawn on Canvas

问题描述

我正在 Canvas 上绘制文本，但对抗锯齿的质量感到失望.据我所知，浏览器不会对 Canvas 上的文本进行亚像素抗锯齿处理.

I'm drawing text on Canvas, and am disappointed with the quality of antialiasing. As far as I've been able to determine, browsers don't do subpixel antialising of text on Canvas.

这是否准确?

这一点在 iPhone 和 Android 上尤为明显，其中生成的文本不像其他 DOM 元素呈现的文本那么清晰.

This is particularly noticeable on iPhone and Android, where the resulting text isn't as crisp as text rendered by other DOM elements.

对于在 Canvas 上输出的高质量文本有什么建议吗?

Any suggestions for high quality text out put on Canvas?

乔伯特

推荐答案

我的回答来自这个链接，也许它会帮助别人.http://www.html5rocks.com/en/tutorials/canvas/hidpi/

My answer came from this link, maybe it will help someone else. http://www.html5rocks.com/en/tutorials/canvas/hidpi/

重要代码如下.

// finally query the various pixel ratios
    devicePixelRatio = window.devicePixelRatio || 1,
    backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1,

    ratio = devicePixelRatio / backingStoreRatio;

// upscale the canvas if the two ratios don't match
if (devicePixelRatio !== backingStoreRatio) {

    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = oldWidth * ratio;
    canvas.height = oldHeight * ratio;

    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';

    // now scale the context to counter
    // the fact that we've manually scaled
    // our canvas element
    context.scale(ratio, ratio);

}

这篇关于在 Canvas 上绘制的文本抗锯齿效果不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！