Javascript 为什么在同一张画布上有些图像模糊，有些图像清晰？

在我正在处理的画布项目中，我有一个基于平铺的网格，以及一个选项面板。我已经把所有的东西都做好了，所有的图像都很清晰，考虑了屏幕大小，没有消除混叠，等等。一切（图形方面）都很完美，问题是有时候我需要改变行和列的数量，这会改变画布的整体尺寸。由于其他一些问题，我在

编辑器

类中使用了

缓冲区

画布，它被渲染到主画布上

以下是我的编辑器代码（仅图形）：

导出类编辑器{
构造函数（精灵表、工具图像）{
this.spritesheet=spritesheet；
this.toolmages=toolmages；
这一行=25；
这个.cols=25；
这个尺寸=16；
this.extra=this.size*3；//底部额外
this.w=this.cols*this.size；
this.h=this.rows*this.size+this.extra；
this.buffer=document.createElement（'canvas'）.getContext（'2d'，{alpha:false，dessynchronized:true}）；
this.buffer.imageSmoothingEnabled=false；
this.buffer.canvas.width=this.cols*this.size；
this.buffer.canvas.height=this.rows*this.size+this.extra；
this.buffer.canvas.style.imageRendering='pixelated'
this.buffer.imageSmoothingEnabled=false；
this.map=[]；//二维映射对象，不重要
}
addRow（）{
这个.rows++；
this.h=this.rows*this.size+this.extra；
this.map[this.rows-1]=[]；
for（设i=0；i

以下是主要代码（在浏览器中运行）：

const context=document.querySelector（'canvas'）.getContext（'2d'）；
window.setInterval（（）=>{
clearRect（0,0，context.canvas.width，context.canvas.height）；
context.canvas.style.imageRendering='像素化'；
context.canvas.width=currentEditor.w；
context.canvas.height=currentEditor.h；
currentEditor.prepare（）；
render（上下文）；
resizeLevel（currentEditor.w，currentEditor.h）；
}, 1000/60);
//调整大小功能
函数resizeLevel（w，h）{
//获取窗口的高度和宽度
变量高度=document.documentElement.clientHeight；
var width=document.documentElement.clientWidth；
宽度与高度之比=w/h；
//这样可以确保调整显示画布的大小，以保持贴图的宽高比。
如果（宽度/高度<宽度/高度比）高度=数学地板（宽度/宽度/高度比）；
else宽度=数学地板（高度*宽度\高度\比率）；
//这将设置显示画布的CSS，以将其调整为缩放的高度和宽度。
context.canvas.style.height=高度+px'；
context.canvas.style.width=width+'px'；
//这将使画布居中
context.canvas.style.marginTop=（innerHeight/2-height/2）+“px”；
context.canvas.style.marginLeft=（innerWidth/2-width/2）+“px”；
}

所有图像一开始都很清晰，但每当我添加或减去行或列时，所有按2缩放的图像（

this.drawToBuffer（w，x，y，z，2）

）都会变得模糊，即使我添加行并删除行也是如此

之前：

之后：

我希望图像像第一个一样，清晰且像素化，无论我尝试什么，放大的图像都不会看起来清晰，我已经确保它们都是整数，将图像渲染设置为

export class Editor{
    constructor(spritesheet, toolImages){
        this.spritesheet = spritesheet;
        this.toolImages = toolImages;

        this.rows = 25;
        this.cols = 25;
        this.size = 16;

        this.extra = this.size *3;//extra on the bottom

        this.w = this.cols * this.size;
        this.h = this.rows * this.size + this.extra;


        this.buffer = document.createElement('canvas').getContext('2d', { alpha:false, desynchronized:true });
        this.buffer.imageSmoothingEnabled = false;
        this.buffer.canvas.width = this.cols * this.size;
        this.buffer.canvas.height = this.rows * this.size + this.extra;
        this.buffer.canvas.style.imageRendering =  'pixelated'
        this.buffer.imageSmoothingEnabled = false;

        this.map = [];//2d map object, not important
        
    }
    addRow(){
        this.rows++;
        this.h = this.rows * this.size + this.extra;
        this.map[this.rows-1] = [];
        for(let i = 0; i < this.rows; i++){
            this.map[this.rows-1][i] = 'blank';
        }
        this.buffer.canvas.height = this.rows * this.size + this.extra;
        console.log('adding: ' + this.rows);
    };
    delRow(){
        this.rows--;
        this.h = this.rows * this.size + this.extra;
        this.buffer.canvas.height = this.rows * this.size + this.extra;

        delete this.map[this.rows];
        console.log('deleting: ' + this.rows);
    };

    drawToBuffer(cutx, cuty, pasteX, pasteY, mult = 1){
        this.buffer.drawImage(this.spritesheet, cutx, cuty, this.size, this.size, pasteX, pasteY, this.size * mult, this.size * mult);
        
    }
    prepare(){
        this.buffer.clearRect(0,0,this.buffer.canvas.width,this.buffer.canvas.height);
        this.buffer.fillStyle = '#00131B';
        this.buffer.fillRect(0,0,this.buffer.canvas.width,this.buffer.canvas.height);
        this.buffer.fillStyle = '#000000';
        this.buffer.fillRect(0, this.buffer.canvas.height - this.extra + 1, this.buffer.canvas.width, this.size-2);

        let amount = Math.floor(this.buffer.canvas.width/6);

        let Y = this.size * (this.rows +1);
        let S;
        this.buffer.fillStyle = '#555555';
        switch(this.editorShow){
        //there are more tabs, but they all look like this one:

            case 'walls':
                S = (this.w - this.size*2)/4;
                this.drawToBuffer(0, 25*this.size,  0, Y, 2);
                this.drawToBuffer(0, 27*this.size,  S, Y, 2);
                this.drawToBuffer(0, 28*this.size,S*2, Y, 2);
                this.drawToBuffer(0, 29*this.size,S*3, Y, 2);
                this.drawToBuffer(0, 30*this.size,S*4, Y, 2);
            break;
        }
//toolbar images
        this.buffer.drawImage(this.toolImages[0], 3, this.buffer.canvas.height - this.extra);
        this.buffer.drawImage(this.toolImages[1], amount+3, this.buffer.canvas.height - this.extra);
        this.buffer.drawImage(this.toolImages[2], amount*2+3, this.buffer.canvas.height - this.extra);
        this.buffer.drawImage(this.toolImages[3], amount*3+3, this.buffer.canvas.height - this.extra);
        this.buffer.drawImage(this.toolImages[4], amount*4+3, this.buffer.canvas.height - this.extra);
        this.buffer.drawImage(this.toolImages[5], amount*5+3, this.buffer.canvas.height - this.extra);

    }
    render(context){
        context.drawImage(this.buffer.canvas,0,0);
    }

}

const context = document.querySelector('canvas').getContext('2d');


window.setInterval(()=>{
   context.clearRect(0,0,context.canvas.width,context.canvas.height);
   context.canvas.style.imageRendering = 'pixelated';
   context.canvas.width = currentEditor.w;
   context.canvas.height = currentEditor.h;
   currentEditor.prepare();
   currentEditor.render(context);
   resizeLevel(currentEditor.w, currentEditor.h);
}, 1000/60);

//the resize function
function resizeLevel(w,h) {

    // Get the height and width of the window
    var height = document.documentElement.clientHeight;
    var width  = document.documentElement.clientWidth;

    let width_height_ratio = w / h;
    // This makes sure the DISPLAY canvas is resized in a way that maintains the MAP's width / height ratio.
    if (width / height < width_height_ratio) height = Math.floor(width  / width_height_ratio);
    else                                         width  = Math.floor(height * width_height_ratio);

    // This sets the CSS of the DISPLAY canvas to resize it to the scaled height and width.
    context.canvas.style.height = height + 'px';
    context.canvas.style.width  = width  + 'px';
    //this centers the canvas
    context.canvas.style.marginTop = (innerHeight/2 - height/2) + 'px';
    context.canvas.style.marginLeft = (innerWidth/2 - width/2) + 'px';
   
}