剪切的图像不在HTML5画布中的上一个图像旁边绘制

Question

我有一个基于图块的地图，我正在尝试根据嵌套数组和精灵表绘制。剪切图像时，它会在画布上绘制，但不会在先前绘制的图像旁边绘制。这是它现在的绘制方式。

图像需要互相靠在一起。谁能解释我哪里出错？

JS

@interface CustomWindow : NSWindow <NSWindowDelegate>

- (id)init
    [self setDeligate:self];   
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(gainedFocus:) name:NSWindowDidBecomeKeyNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(lostFocus:) name:NSWindowDidResignKeyNotification object:nil];


-(void) gainedFocus:(NSNotification*)notification
{
    hasFocus = true;
    [self setMovableByWindowBackground:NO];
}


-(void) lostFocus:(NSNotification*)notification
{
    hasFocus = false;
    [self setMovableByWindowBackground:YES];
}


- (void)mouseDragged:(NSEvent *)theEvent    // Only called if window has focus (is key)
{
    [self positionWindow]; // Works only if window started drag with  focus (key)
}
- (void)mouseMoved:(NSEvent *)event         // Only called if window has focus (is key)
- (void)mouseUp:(NSEvent *)event            // Only called if window has focus (is key) 
- (void)mouseDown:(NSEvent *)event          // Only called if window has focus (is key)

// Deligate functions
- (void)windowWillMove:(NSNotification *)notification // Is called when not key

- (void)windowDidMove:(NSNotification *)notification  // Is called when not key but only when the movement stops and the window flickers between where i’m dragging and where the code moves it to.
{
    [self positionWindow];
}


I can a function that moves the window to a desired region with:
-(void) positionWindow {
    [self setFrameOrigin: ...];
}

Answer 1

我实际上已经明白了。我在每个for循环后错误地设置了xPos和yPos变量。而不是添加tileWidth和tileHeight，我需要像这样添加destWidth和destHeight。

for(var rows = 0; rows < Basemap.length; rows++){
    tileHeight = 360;
    destHeight = tileHeight / 3;
    for(var cols = 0; cols < Basemap[rows].length; cols++){
        tileWidth = 360;
        destWidth = tileWidth / 3;
        if(Basemap[rows][cols] == 0){ 
            basemapCtx.drawImage(spriteSheet, 363, 363, tileWidth, tileHeight, xPos, yPos, destWidth, destHeight); 
        } 
        xPos += destWidth; 
    } 
    xPos = 0; 
    yPos += destHeight; 
} 
yPos = 0; 

}