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