画布元素上的文本/字体模糊

Question

我在火狐浏览器（安卓）的画布上只得到模糊的文本/字体。 我正在 Nexus 7 (2013) 上进行测试，该设备具有 2 的 devicePixelRatio。我已经通过使用 html5 rocks 上的这篇文章 来解决高密度屏幕问题。这对于我所有的桌面浏览器（Chrome、Firefox、Safari、Opera、IE 10）和 Android 上的 Chrome 都非常有效。

我搜索了这个问题并发现 某人遇到了问题 onload 模糊。因此，我创建了这个测试：http://jsfiddle.net/MadLittleMods/rjLaC/，但在任何浏览器中，onload 和从按钮手动生成之间没有区别。

我的实际项目是制作标签元素：

演示：jsFiddle

预览（Chrome桌面 版本30.0.1599.69）：

因为Nexus具有高像素密度，所以预览图较大（Chrome Android v. 30.0.1599.82）：

预览（Firefox桌面版 v. 24.0）：

由于Nexus具有高像素密度，因此预览效果较大（FireFox Android v. 24.0）：

我不知道是什么原因导致FireFox渲染模糊。

这是我对HTML5 Rocks文章的实现：

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

- MLM

---

1. 我不明白你在宽度/高度的起始位置上加上+1和+0.5的意思。
2. 在缩放之前，我会尝试将画布向（0.5;0.5）平移。

- GameAlchemist

Answer 1

在FireFox for Android中，这已经不再是一个问题。

我刚刚在Android 4.4.2上使用FireFox 28.0.1进行了测试，效果非常清晰。

- MLM