我在火狐浏览器(安卓)的画布上只得到模糊的文本/字体。 我正在 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):
这是我对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
});
}
// ...