Warum die Verwendung von devicePixelRatio im Kontext nicht funktioniert

Question

Meine Frage betrifft die Verwendung von devicePixelRatio. Betrachten Sie das folgende Beispiel:

const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const size = 5;

  canvas.style.width = `${size}px`;
  canvas.style.height = `${size}px`;

  const scale = window.devicePixelRatio;
  canvas.width = Math.floor(size * scale);
  canvas.height = Math.floor(size * scale);
  canvas.style.backgroundColor="red";
  ctx.fillStyle = "black";
  ctx.fillRect( 3, 3, 1,1 );

Was ich will, ist Folgendes:

Das devicePixelRatio meines Bildschirms ist gleich 2.

Mein Ziel ist es, Punkte der Größe 1x1 auf einer Leinwand der Größe 5x5 anzuzeigen.

Ich habe angewendet, was ich verstanden habe: Ich habe die Größe des Zeichenpuffers im Vergleich zur Größe des Anzeigepuffers verdoppelt.

Für die Punktgröße: 1x1 sind die Ergebnisse gut.

Aber die Leinwand ist immer noch doppelt so groß. 10x10 Wofür? Die Erklärung liegt natürlich auf der Hand...

---

Meine Frage wurde am 1. Mai umgeschrieben, sie ist nicht klar

Mein Bildschirm gibt einen window.devicePixelRatio-Wert gleich 2

zurück Mein Ziel ist es, Code zu schreiben, der Pixel in einem Quadrat anzeigt.

Die Größe des Quadrats beträgt 5x5 Pixel.

Ich habe versucht, den folgenden Code zu verwenden:

  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const size = 5;

  canvas.style.width = `${size}px`;
  canvas.style.height = `${size}px`;

  const scale = window.devicePixelRatio;
  canvas.width = Math.floor(size * scale);
  canvas.height = Math.floor(size * scale);
  canvas.style.backgroundColor="red";
  ctx.fillStyle = "black";
  ctx.fillRect( 3, 3, 1,1 );

Das ist das Ergebnis: Ich habe den Screenshot kopiert und eingefügt

Es ist unter Gimp, ich habe hineingezoomt und ein Raster hinzugefügt

Schwarzer Punkt, das Ergebnis von ctx.fillRect(3, 3, 1,1) hat genau die Größe, die ich möchte.

Aber die Größe des roten Hintergrunds beträgt 10 x 10. Ich wünschte, es wäre 5x5

Answer 1

根据我的理解，OP想要的是画布的物理像素为5x5px，点为1x1px，这是在不使用.scale的情况下进行的另一种尝试：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const size = 5;
const scale = window.devicePixelRatio;

canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;
canvas.style.transform = `scale(${1 / scale })`;
canvas.style.transformOrigin = 'top left';

canvas.width = size;
canvas.height = size;
canvas.style.backgroundColor = 'red';
ctx.fillStyle = 'black';
ctx.fillRect(3, 3, 1, 1);

<canvas id="canvas" />

---

原始解决方案

默认情况下，上下文和画布保持两种不同的逻辑，上下文是绘图缓冲区，而画布只是负责将绘图缓冲区的结果缩放到正确的大小。

为了在画布上为高设备像素比设备绘图，同时确保画布保持相同的绘图缓冲区，您可以使用 ctx.scale 方法，该方法应根据您传入的值（例如 devicePixelRatio):

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const size = 5;

canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

const scale = window.devicePixelRatio;
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);
canvas.style.backgroundColor = 'red';
ctx.scale(scale, scale);
ctx.fillStyle = 'black';
ctx.fillRect(3, 3, 1, 1);

<canvas id="canvas" />