HTML5 Canvas / JavaScript（滾動背景/相機）

Question

編輯：09/18/15擺脫了屏幕問題，但提出了另一個更煩人的問題。 屏幕在移動時不斷閃爍。

function drawMap(){
    context.clearRect(0, 0,canvas.width, canvas.height);
    context.drawImage(map, 0, 0);
    context.drawImage(playerSprite, currentFrame * playerWidth, iconState * playerHeight,
    playerWidth, playerHeight,xPosition, yPosition,playerWidth, playerHeight);
}

function move(x, y){
    xPosition += x; yPosition += y;
    context.translate(-x, -y);
    context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0,canvas.width, canvas.height);
    context.restore();
}

我的屏幕真的很亂，我不知道為什么TT，我將在下面發布相關的代碼片段。 請幫助我查明並解決此問題。 謝謝！

http://s14.postimg.org/9vwgy59gx/dafuq.png

var mapX = 0, mapY = 0, mapXOffset = 0, mapYOffset = 0;

function move(x, y){xPosition += x; yPosition += y; context.translate(-x, -y)}
//context.translate is referring to the map canvas

function drawMap(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(map, mapX + mapXOffset, mapY + mapYOffset);
}

單獨功能的一部分：

    if(moving[38]) {faceDirection(38);move(0, -moveDistance); mapYOffset++}
    if(moving[40]) {faceDirection(40);move(0, moveDistance); mapYOffset--}  
    if(moving[39]) {faceDirection(39);move(moveDistance, 0);mapXOffset++}
    if(moving[37]) {faceDirection(37);move(-moveDistance,0);mapXOffset--}

這是我唯一以任何方式/形狀/形式更改地圖的時間。

Answer 1

這是我為放棄的平台游戲編寫的函數。 我已經對其進行了測試，並且可以正常工作。 相機邊距就是相機滾動的距離。

function testForScrolling()
{
    var translateLeft = hero.x < leftCameraMargin
        && leftCameraMargin >= minCamX;
    var translateRight = hero.x + hero.width > rightCameraMargin
        && rightCameraMargin <= maxCamX;
    var translateUp = hero.y < topCameraMargin
        && topCameraMargin >= minCamY;
    var translateDown = hero.y + hero.width > bottomCameraMargin
        && bottomCameraMargin <= maxCamY;

    if (translateLeft)
    {
        leftCameraMargin -= hero.speed;
        rightCameraMargin -= hero.speed;
        translateCanvases(hero.speed, 0);
    }
    else if (translateRight)
    {
        leftCameraMargin += hero.speed;
        rightCameraMargin += hero.speed;
        translateCanvases(-1 * hero.speed, 0);
    }
    if (translateUp)
    {
        topCameraMargin -= hero.speed;
        bottomCameraMargin -= hero.speed;
        translateCanvases(0, hero.speed);
    }
    else if (translateDown)
    {
        topCameraMargin += hero.speed;
        bottomCameraMargin += hero.speed;
        translateCanvases(0, -1 * hero.speed);
    }
}