TA貢獻2036條經驗 獲得超8個贊
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);
TA貢獻1789條經驗 獲得超8個贊
我不知道我是否為時已晚，但是您可以使用 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
舉報