Question

我有一个运行简单的2D HTML画布游戏，目前您可以看到整个地图，我希望有一个用于画布游戏的滚动相机，所以您无法一次看到整个地图，我没有想法如何做到这一点。我已经用Google搜索了一下，什么也没找到。

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标签中包含canvas标签。

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

HTML5画布游戏中的滚动相机（使用javascript）

2 个答案: