devicePixelRatio の使用がコンテキスト内で機能しない理由

Question

私の質問は、devicePixelRatio の使用についてです。 次の例を考えてみましょう:

リーリー

私が欲しいのはこれです:

私の画面の devicePixelRatio は 2 です。

私の目標は、サイズ 5x5 のキャンバスにサイズ 1x1 の点を表示することです。

理解した内容を適用して、表示バッファのサイズと比較して描画バッファのサイズを 2 倍にしました。

ポイント サイズ: 1x1 の場合、結果は良好です。

ただし、キャンバスのサイズはまだ 2 倍です。 10x10 何のために? もちろん説明は明らかです...

---

5 月 1 日に質問を書き直しましたが、不明瞭でした。

画面から返された window.devicePixelRatio 値は 2

に等しいです 私の目標は、ピクセルを正方形に表示するコードを書くことです。

正方形のサイズは 5x5 ピクセルです。

次のコードを使用してみました:

リーリー

これが結果です: スクリーンショットをコピーして貼り付けました

これは Gimp の下にあり、拡大してグリッドを追加しました

黒い点、ctx.fillRect(3, 3, 1,1) の結果は、まさに私が望むサイズです。

ただし、赤い背景のサイズは 10 x 10 です。 5x5

にしたい

Answer 1

私が理解しているところによると、OP が望んでいるのは、5x5px の物理ピクセルと 1x1px のポイントを持つキャンバスです。ここでは、.scale を使用しない別の試みを示します。

リーリー リーリー

---

元のソリューション

デフォルトでは、コンテキストとキャンバスは 2 つの異なるロジックを維持します。コンテキストは描画バッファーであり、キャンバスは描画バッファーの結果を正しいサイズにスケーリングすることのみを担当します。

キャンバスが同じ描画バッファーを維持しながら、デバイスのピクセル比が高いデバイスのキャンバスに描画するには、

ctx.scale メソッド を使用できます。渡された値に基づいて (例: devicePixelRatio):

リーリー リーリー