HTML5 畫布游戲中的滾動相機（使用 javascript）

Question

我有一個簡單的 2d HTML 畫布游戲，目前你可以看到整個地圖，我希望畫布游戲有一個滾動相機，所以你不能一次看到整個地圖，我不知道如何做這個。 我用谷歌搜索了一下，一無所獲。

ctx.drawImage(character,x,y);

畫布已經正確設置

<canvas id="canvas"></canvas>

沒有錯誤或錯誤

Answer 1

2種方法 ：

1）用相機偏移調整要繪制的對象的位置：

deltaX=object.x-cameraX
deltaY=object.y-cameraY
if(deltaX + object.width > 0
  && deltaX - object.width < cameraWidth 
  &&deltaY + object.height > 0
  && deltaY - object.height < cameraHeight){

    ctx.drawImage(character,deltaX,deltaY);
}

2）有兩個上下文並將一個打印到另一個

ctxCamera.drawImage(ctx,cameraX,cameraY);

Answer 2

我不知道我是否為時已晚，但您可以使用 div 標簽包含畫布標簽。

HTML：

<div id = "viewport">
  <canvas id="canvas"></canvas>
</div>

CSS：

#viewport{
  overflow: hidden; //so you can't see outside of the div
  width: /*insert desired amount*/px;
  height: /*insert desired amount*/px;
}

Javascript：

function scrollCamera(camx, camy){
  var viewport = document.getElementById('viewport');
  viewport.scrollTop = camy;
  viewport.scrollLeft = camx;
}

scrollCamera(x-/*desired amount*/, y-/*desired amount*/); //makes the camera follow the player