Javascript 画布-未完全渲染的平铺

我正在用Javascript制作一个基于瓷砖的游戏，使用Canvas API。我一直在关注MDN。它可以工作，但当您移动相机时，它不会渲染所有的瓷砖，尤其是当您将其向下和向右移动时。我尝试过复制、粘贴代码，并用教程的代码替换代码，但仍然不起作用

以下是客户端代码：

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var tiles=新图像（）；
tiles.src=“img/tiles.png”；
var socket=io（）；
函数加载器（游戏）{
这个游戏=游戏；
this.images={}
}
Loader.prototype.loadImage=函数（id、url、磁贴）{
var image=新图像（）；
image.src=url；
此.images[id]={
img：图像，
url:url，
瓷砖：瓷砖
}
}
Loader.prototype.ready=函数（）{
this.game.loadImages（this.images）；
}
功能游戏（画布、地图、照相机）{
this.canvas=画布；
this.ctx=this.canvas.getContext（'2d'）；
这个。怪物=[]；
this.player={}；
this.map=map；
this.timestamp=函数（）{
return window.performance&&window.performance.now？window.performance.now（）：new Date（）.getTime（）；
}
这个照相机||{
x:0,，
y:0，
宽度：256，
身高：256
}
}
Game.prototype.init=函数（ts）{
此参数为当前值={
tileset:这个。图像[ts]
}
this.width=this.map.cols*this.map.tsize；
this.height=this.map.rows*this.map.tsize；
这个.canvas.height=1000；
这个.canvas.width=1000；
this.camera.maxX=this.map.cols*this.map.tsize-this.camera.width；
this.camera.maxY=this.map.rows*this.map.tsize-this.camera.height；
}
Game.prototype.loadImages=函数（图像）{
这个。图像=图像；
}
Game.prototype.start=函数（）{
这个.now=0；
这是0.dt=0；
this.last=this.timestamp（）；
这个.frame（）；
}
Game.prototype.update=函数（增量）{
var-dirx=0；
var-diry=0；
如果（KEYS.LEFT）{dirx=-1；}
如果（KEYS.RIGHT）{dirx=1；}
如果（KEYS.UP）{diry=-1；}
如果（KEYS.DOWN）{diry=1；}
这个.camera.move（delta，dirx，diry）；
}
Game.prototype.render=函数（增量）{
this.ctx.clearRect（0,0，this.canvas.width，this.canvas.height）；
var startCol=Math.floor（this.camera.x/this.map.tsize）；
var endCol=startCol+（this.camera.width/this.map.tsize）；
var startRow=Math.floor（this.camera.y/this.map.tsize）；
var endRow=startRow+（this.camera.height/this.map.tsize）；
var offsetX=-this.camera.x+startCol*this.map.tsize；
var offsetY=-this.camera.y+startRow*this.map.tsize；
对于（var c=startCol；c您的游戏运行正常。您有一个256x256像素的摄影机窗口。在渲染过程中，此空间完全填满了平铺。如果您对摄影机窗口外的“消失”平铺感到困扰，请使用或减小画布大小以与摄影机大小相对应


var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
函数加载器（游戏）{
这个游戏=游戏；
this.images={}
}
Loader.prototype.loadImage=函数（id、url、磁贴）{
var image=新图像（）；
image.src=url；
此.images[id]={
img：图像，
url:url，
瓷砖：瓷砖
}
}
Loader.prototype.ready=函数（）{
this.game.loadImages（this.images）；
}
功能游戏（画布、地图、照相机）{
this.canvas=画布；
this.ctx=this.canvas.getContext（'2d'）；
这个。怪物=[]；
this.player={}；
this.map=map；
this.timestamp=函数（）{
return window.performance&&window.performance.now？window.performance.now（）：new Date（）.getTime（）；
}
这个照相机||{
x:0,，
y:0，
宽度：256，
身高：256
}
}
Game.prototype.init=函数（ts）{
此参数为当前值={
tileset:这个。图像[ts]
}
this.width=this.map.cols*this.map.tsize；
this.height=this.map.rows*this.map.tsize；
this.canvas.width=this.camera.width；
this.canvas.height=this.camera.height；
this.camera.maxX=this.map.cols*this.map.tsize-this.camera.width；
this.camera.maxY=this.map.rows*this.map.tsize-this.camera.height；
}
Game.prototype.loadImages=函数（图像）{
这个。图像=图像；
}
Game.prototype.start=函数（）{
这个.now=0；
这是0.dt=0；
this.last=this.timestamp（）；
这个.frame（）；
}
Game.prototype.update=函数（增量）{
var-dirx=0；
var-diry=0；
如果（KEYS.LEFT）{dirx=-1；}
如果（KEYS.RIGHT）{dirx=1；}
如果（KEYS.UP）{diry=-1；}
如果（KEYS.DOWN）{diry=1；}
这个.camera.move（delta，dirx，diry）；
}
Game.prototype.render=函数（增量）{
this.ctx.clearRect（0,0，this.canvas.width，this.canvas.height）；
var startCol=Math.floor（this.camera.x/this.map.tsize）；
var endCol=startCol+（this.camera.width/this.map.tsize）；
var startRow=Math.floor（this.camera.y/this.map.tsize）；
var endRow=startRow+（this.camera.height/this.map.tsize）；
var offsetX=-this.camera.x+startCol*this.map.tsize；
var offsetY=-this.camera.y+startRow*this.map.tsize；
对于（var c=startCol；c这解决了一半的问题，但它仍然不会加载底部或右侧的平铺，直到空白等于平铺的大小。我刚刚尝试过，它所做的只是将相机大小从5更改为4您的相机大小设置为254像素，对应于4个平铺和64像素。您想渲染什么在你的相机窗口外？我修改了我的答案，画布大小现在与你的相机大小相对应。现在它可以工作了，谢谢！我有一个问题，有没有一种方法可以不使用相同的相机大小和画布大小，也不使用剪裁矩形？似乎应该有一种方法可以做到。嘿，spacegeek224，我编辑了你的答案-tu已将代码添加到可执行代码段中。是否批准该编辑？