我只在firefox(android)的画布上看到模糊的文本/字体。我正在测试Nexus7(2013),它的设备像素比为2。我已经用this article on html5 rocks来对付高密度屏幕了。这对我所有的桌面浏览器(chrome、firefox、safari、opera、ie 10)和android的chrome来说都是非常棒的。
我已经搜索过这个问题,发现onload模糊。所以我创建了这个测试:someone having a problem但是在任何浏览器中,onload和manual generation from按钮没有区别。
我的实际项目是制作标记元素:
http://jsfiddle.net/MadLittleMods/rjLaC/
预览(Chrome桌面版30.0.1599.69版):
预览大,因为Nexus具有高像素密度(Chrome Android V.30.0.1599.82):
预览(Firefox桌面版24.0版):
预览大,因为Nexus具有高像素密度(Firefox Android V.24.0):
我不知道是什么使firefox渲染变得模糊。
以下是我对Demo: jsFiddle的实现:

// ...
// React to high pixel density (retina) screens
var hdCanvasWidth = rectX + rectWidth + 1;
var hdCanvasHeight = rectY + rectHeight + .5;
/* * /
$(element).attr({
    'width': hdCanvasWidth * window.devicePixelRatio,
    'height': hdCanvasHeight * window.devicePixelRatio
});
/* */

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

ratio = devicePixelRatio / backingStoreRatio;

// ensure we have a value set for auto.
// If auto is set to false then we
// will simply not upscale the canvas
// and the default behaviour will be maintained
if (typeof auto === 'undefined') {
    auto = true;
}

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

    $(element).attr({
        'width': hdCanvasWidth * ratio,
        'height': hdCanvasHeight * ratio
    });

    $(element).css({
        'width': hdCanvasWidth + 'px',
        'height': hdCanvasHeight + 'px'
    });

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

}
// No weird ppi so just resize canvas to fit the tag
else
{
    $(element).attr({
        'width': hdCanvasWidth,
        'height': hdCanvasHeight
    });
}
// ...

最佳答案

这不再是firefox for android的问题。
我刚刚在android 4.4.2上用firefox 28.0.1进行了测试,它非常简洁。

08-26 19:08
查看更多