即使使用CSS和JavaScript，禁用图像平滑也不能工作。

Question

我有一个画布，只画大像素，因为游戏完全是基于框。问题是，在每一张图像和画布上都有图像平滑。而且很丑。我已经在互联网上看了很长一段时间了，到目前为止，所有的解决方案都没有奏效。

​

​

画布最终总是模糊名称、文本和其他一切。图像也模糊了。

我尝试过我认为不是非常复杂的每一个解决方案，这些解决方案涉及到一些我不理解的东西。我使用CSS和JavaScript尝试禁用图像平滑。

到目前为止，我尝试过的是：

CSS

#gameCanvas {
    image-rendering: optimizeSpeed;
    image-rendering: optimizeContrast;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    /* image-rendering: pixelated; */
    -ms-interpolation-mode: nearest-neighbor;
}

JavaScript

game.imageSmoothingEnabled = false;
game.webkitImageSmoothingEnabled = false;
game.mozImageSmoothingEnabled = false;
game.filter = 'url(#remove-alpha)';

(游戏是画布的2d上下文)编辑:我不确定过滤器URL是否做了什么。

​

​

是否有CSS、JavaScript和HTML的组合可以禁用模糊化？

​

game = document.getElementById('gameCanvas').getContext('2d');
document.getElementById('gameCanvas').width = window.innerWidth;
document.getElementById('gameCanvas').height = window.innerHeight;
document.getElementById('gameCanvas').addEventListener('contextmenu', e => e.preventDefault());
game.imageSmoothingEnabled = false;
game.webkitImageSmoothingEnabled = false;
game.mozImageSmoothingEnabled = false;
game.filter = 'url(#remove-alpha)';

function drawThings() {
game.font = '11px Arial';
game.fillStyle = '#000000';
game.fillText('HERES SOME TEXT', Math.random()*500, Math.random()*500);
game.fillRect(Math.random()*500, Math.random()*500, 40, 40);
}
window.onresize = function() {
game.imageSmoothingEnabled = false;
game.webkitImageSmoothingEnabled = false;
game.mozImageSmoothingEnabled = false;
game.filter = 'url(#remove-alpha)';
}

#gameCanvas {
    position: absolute;
    top: 80px;
    left: 0px;
    margin: 0px;
    -webkit-user-drag: none;
    user-select: none;
    image-rendering: optimizeSpeed;
    image-rendering: optimizeContrast;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    /* image-rendering: pixelated; */
    -ms-interpolation-mode: nearest-neighbor;
}

<button onclick="drawThings();">click for things</button>
<p>If you zoom in you can see that the text is blurry</p>
<canvas id="gameCanvas"></canvas>

​

Answer 1

我找到了一个解决方案，它是DPR (设备像素比)--这是将屏幕缩放到非本地分辨率的结果，所以插值会使图像看起来模糊。它可以通过缩放画布(以及改变宽度和高度)来消除DPR的影响。可以使用window.devicePixelRatio属性访问它：

DPR = window.devicePixelRatio ?? 1;
canvas.width = window.innerWidth*DPR;
canvas.height = window.innerHeight*DPR;
canvas.scale(DPR, DPR);

这将缩放画布，使画布的分辨率与屏幕的实际分辨率相匹配，而不是窗口的“假定”分辨率。当与CSS属性image-rendering: pixelated;组合时，它工作得很好。

请注意，它消除了反混叠，这样对角线将出现更多锯齿状。