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

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

这准确吗？

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

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

茹贝尔

解决方法

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

}

原文地址：https://www.jb51.cc/html5/168306.html