Canvas上绘制的文本的抗锯齿效果差

Question

我在Canvas上绘制文字,并对抗锯齿的质量感到失望.据我所知,浏览器不会对Canvas上的文本进行亚像素消除.

这准确吗？

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

有关高质量文本的任何建议都放在Canvas上吗？

茹贝尔

Answer 1

我的答案来自这个链接,也许它会帮助别人. 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);

}

Answer 2

完成了一些子像素抗锯齿，但这取决于浏览器/操作系统。

之前有一些关于此的讨论可能对您有所帮助。

我没有 Android 或 iOS 设备，但只是为了好玩，在绘制之前尝试将上下文平移 (.5, 0) 像素，看看这是否会对文本的渲染方式产生影响。