FireFox (Android) でのみキャンバス上のテキスト/フォントがぼやけます。devicePixelRatio が 2 の Nexus 7 (2013) でテストしています。この記事を html5 rocks で使用して、高密度画面に既に対処しています。これは、すべてのデスクトップ ブラウザー (Chrome、Firefox、Safari、Opera、IE 10) と Chrome for Android で非常にうまく機能します。
問題を検索したところ、オンロードがぼやけているという問題を抱えている人が見つかりました。だから私はこのテストを作成しました：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
});
}
// ...