即使使用CSS和JavaScript,禁用图像平滑也不起作用
发布时间: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
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报