我只在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进行了测试,它非常简洁。