HTML5 キャンバスでのフォント、画像、ぼやけたグラフィックの描画の問題を解決する

html5 キャンバス描画のフォント、画像、グラフィックスがぼやける問題

は主に高 dpi デバイスで発生します。これは、携帯電話やタブレットなど、平方インチあたりのピクセル数が多いことを意味します。もちろん、多くのハイエンド デスクトップ コンピューターにも高解像度および高 dpi モニターが搭載されています。

ブラウザでのキャンバスのスケーリングの原則

スタイルが設定されていない場合、HTML属性の幅と高さがサイズとして使用されます。

スタイルの幅と高さが設定されている場合、スタイル設定はブラウザに描画される最終的なサイズになります。

つまり、属性の幅と高さは実際の幅と高さを表していないため、高dpiでキャンバスが拡大され、結果としてぼやけます。

キャンバスの幅と高さの属性は、ブラウザに描画した後、現在の dpi に従って拡大縮小されます。

devicePixelRatio (ウィンドウメン​​バー) は、高 dpi 状態で拡大される属性の幅/高さの比率を保存します。

エラー解決事例

キャンバスのぼかしをオンラインで検索すると、2つの解決策があり、現在は適切ではない可能性があります。

1 つは CanvasRenderingContext2D.translate(0.5,0.5);

これは実際、ピクセル オフセットを処理するために 3D 描画の分野で一般的に使用されています。Canvas の 2D コンテキストはすでにこの問題に対処しています。

もう 1 つは、次のようなコードです。この backingStorePixelRatio は、Chrome と Edge で試してみましたが、もう存在しません。

var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1

調査中にキャンバスを動的に作成する方法を使用しました。スタイルの幅/高さにスケーリング比 devicePixelRatio を掛けて、キャンバスの幅/高さの属性を取得します。

これは、ユーザー設定などのブラウザーの dpi が変更されたとき、またはウィンドウを高 dpi モニターから低 dpi モニターに移動したときに発生するため、完璧な解決策ではありません。 (私の 1080p の通常の 23 インチ モニターは 1.25 倍、タブレットは 2.0 倍で、ウィンドウのドラッグ アンド ドロップが発生します)

解決策我在研究时用了动态创建canvas的方法，样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。<br>1. ウィンドウの onresize イベントを動的に作成して監視し、次に従ってキャンバスを再構築します。デバイスのピクセル比。

2. キャンバス スタイルの幅と高さを動的に調整し、onresize イベントも監視します。次に、CanvasRenderingContext2D.scale と連携して、描画されたコンテンツの比率を動的に拡大縮小します。

ブラウザには devicePixelRatio 変更イベントや dpi 変更イベントがありません。ご存知の場合は、メッセージを残してください。

以上がHTML5 キャンバスでのフォント、画像、ぼやけたグラフィックの描画の問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。