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...
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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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);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);