即使使用CSS和JavaScript，禁用图像平滑也不起作用

web小门神 lv.1

发布时间：2022-05-07 15:34:35 203

相关标签： # css# html# webkit# edge

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

画布上的名字、文字和其他东西总是模糊不清。图像也会模糊。

我尝试过我认为不是超级复杂的解决方案，它涉及到很多我不理解的东西。我使用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;
}

If you zoom in you can see that the text is blurry

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。