Sebab menggunakan devicePixelRatio tidak berfungsi dalam konteks

Question

Soalan saya ialah tentang menggunakan devicePixelRatio. Pertimbangkan contoh berikut:

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 );

Apa yang saya mahukan ialah ini:

Peranti skrin sayaPixelRatio adalah sama dengan 2.

Matlamat saya adalah untuk memaparkan mata bersaiz 1x1 dalam kanvas bersaiz 5x5.

Saya menggunakan apa yang saya faham, saya menggandakan saiz penimbal lukisan berbanding saiz penimbal paparan.

Untuk saiz mata: 1x1, hasilnya bagus.

Tetapi kanvas masih dua kali ganda saiz. 10x10 Untuk apa? Penjelasan sudah tentu jelas...

---

Soalan saya telah ditulis semula pada 1 Mei, ia tidak jelas

Skrin saya mengembalikan nilai window.devicePixelRatio bersamaan dengan 2

Matlamat saya adalah untuk menulis kod yang memaparkan piksel dalam segi empat sama.

Saiz segi empat sama ialah 5x5 piksel.

Saya cuba menggunakan kod berikut:

  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 );

Inilah hasilnya: Saya salin dan tampal tangkapan skrin

Ia berada di bawah Gimp, saya zum masuk dan menambah grid

Titik hitam, hasil ctx.fillRect(3, 3, 1,1) betul-betul saiz yang saya mahukan.

Tetapi saiz latar belakang merah ialah 10 x 10. Saya harap ia adalah 5x5

Answer 1

Daripada apa yang saya faham, apa yang OP mahukan ialah kanvas dengan piksel fizikal 5x5px dan mata 1x1px, inilah percubaan lain tanpa menggunakan .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" />

---

Penyelesaian asal

Secara lalai, konteks dan kanvas mengekalkan dua logik berbeza, konteks ialah penimbal lukisan dan kanvas hanya bertanggungjawab untuk menskalakan hasil penimbal lukisan kepada saiz yang betul.

Untuk melukis pada kanvas bagi peranti nisbah piksel peranti tinggi sambil memastikan kanvas mengekalkan penimbal lukisan yang sama, anda boleh menggunakan 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" />