HTML5画布上的摄像头

第一次在这里张贴海报

我已经寻找了几天的解决办法，但都没有结果，如果有人问我这个问题，我请求你联系我，因为我找不到它。不管怎样，这里有：

我正在开发一个基于瓷砖的画布应用程序，在移动相机时遇到问题。本质上，我想把英雄放在屏幕中央，除非他走近和边缘。我曾尝试过在英雄移动时翻译画布，但在剪切方面有问题。最后我重新设计了我的逻辑，现在根据英雄的坐标来决定从哪里开始画画，然后让我的英雄一直画在画布的中心，直到我接近屏幕边缘为止，效果都很好。 这是我当前绘制地图的代码，leoX和leoY是英雄的绝对坐标，画布是600X600

var topLeftX = Math.floor((leoX - 300)/33);
var topLeftY = Math.floor((leoY - 300)/33);


//draw map
for(var rowCtr=topLeftY;rowCtr<mapRows;rowCtr++){
for(var colCtr=topLeftX;colCtr<mapCols;colCtr++){

  var tileId = tileMap[rowCtr][colCtr]+ mapIndexOffset;
  var mapSourceX = Math.floor(tileId % 8 )*33;
  var mapSourceY = Math.floor(tileId / 8 )*33;
  context.drawImage(map, mapSourceX, mapSourceY,33,33,(colCtr-topLeftX)*33,(rowCtr-        topLeftY)*33,33,33);

 }
}
//code to draw leo
context.drawImage(tilesheet, sourceX,sourceY,32,48,300,300,32,48);

//update leo's position                 
leoX += leoDeltaX;
leoY += leoDeltaY;

var topLeftX=Math.floor（（leoX-300）/33）；
var topLeftY=数学楼层（（leoY-300）/33）；
//绘制地图
对于（var rowCtr=topLeftY；rowCtr我想我可能已经解决了这个问题，我不认为它漂亮或优雅，但本质上，我只是在运行检查，看看我是否在地图的边缘或角落，并相应地以不同的方式绘制。当我真的正确绘制了英雄时，我会发布我的解决方案。好的，基本上，上面的代码就是这样做的但是它缺少一些东西，因为一个狮子座在画布上的位置应该只有.5width乘以.5height，如果他不在角落或边缘，那么我做的是做一个变量，叫做adjustedXPos和adjustedYPos，它的设置取决于他的位置，例如，如果他在左上角，我们实际上可以使用他实际的x，y位置在侧边上，我们希望y保持在.5的高度，这样相机仍然可以向上滚动，但希望x代表狮子座的位置。请记住，由于屏幕不再滚动，您需要在右侧偏移。希望这对将来像我这样的傻瓜有所帮助。您能回答这个问题吗现在你自己？可以关闭吗？如果你已经解决了，那么提交你的解决方案作为答案，如果你在2天内没有得到更好的答案，那么接受它。我想我可能已经解决了这个问题，我不认为它是漂亮或优雅的，但本质上，我只是在检查我是否在地图的边缘或角落，并以不同的方式绘制accordingly。我会在正确绘制英雄后发布我的解决方案。好吧，基本上上面的代码可以完成这项工作，但它缺少一些东西，因为一个狮子座在画布上的位置应该只有.5width乘以.5height（如果他不在角落或边缘），所以我做了一个名为adjustedXPos和adjustedYPos的变量这取决于他的位置，例如，如果他在左上角，我们实际上可以使用他实际的x，y位置。在侧边上，我们希望y保持在.5高度，以便相机仍然向上滚动，但希望x代表狮子座的位置。请记住，从屏幕开始，您需要在右侧偏移不再滚动。希望这有助于将来像我这样的傻瓜。你会说你自己已经回答了这个问题吗？它可以关闭吗？如果你已经解决了，那么提交你的解决方案作为答案，如果你在2天内没有得到更好的答案，就接受它。