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

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

<code><span style="font-size: 14px"><strong><span style="font-family: Microsoft YaHei">解决方法</span></strong></span><br><span style="font-family: Microsoft YaHei; font-size: 14px">1、动态创建并监视window的onresize事件，根据<span style="font-family: Consolas">devicePixelRatio</span>重建canvas。<br>2、动态调整canvas样式的宽高，同样监视onresize事件。再配合<span style="font-family: Microsoft YaHei">CanvasRenderingContext2D.scale动态缩放绘制内容的比例。</span><br></span><span style="font-family: Microsoft YaHei; font-size: 14px">浏览器都没有devicePixelRatio改变的事件，或者dpi改变的事件，如果你知道，请留言。</span><br></code>

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