我仅在 FireFox (Android) 中的画布上出现模糊的文本/字体。我在 Nexus 7 (2013) 上进行测试，它的 devicePixelRatio 为 2。我已经通过在 html5 Rocks 上使用这篇文章来对抗高密度屏幕。这对于我所有的桌面浏览器（Chrome、Firefox、Safari、Opera、IE 10）和适用于 Android 的 Chrome 来说都非常棒。
我已经搜索了这个问题，发现有人遇到了onload 模糊的问题。所以我创建了这个测试： http: //jsfiddle.net/MadLittleMods/rjLaC/但是在任何浏览器中从按钮加载和手动生成没有区别。
我的实际项目是制作标签元素：
演示：jsFiddle
预览（Chrome 桌面版v. 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
});
}
// ...