Javascript 为什么在给定特定坐标时绘制画布图像不正确

我正在尝试用香草javascript构建Snake游戏。到目前为止，我已经生成了墙边界并定义了玩家初始头部开始的坐标。但是当我在浏览器中尝试时，一个奇怪的错误发生了，我不知道为什么。以下是一个例子：

一,。一个错误发生了。球员头部是球场上的一个点。然而由于某种原因，这面墙也被漆成了红色（玩家最初的头部颜色）

以下是我的javascript代码：

var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
变量xAxis=600，yAxis=600，wallImage，playerHeadImage；//我们定义画布是600 x 600大
var playerHeadinialxpos=Math.floor（Math.random（）*28）+1；//我们使用28和1，因为29和0被worldTileSet中的墙占据
var playerHeaderInitialyPos=Math.floor（Math.random（）*28）+1；
console.log（playerHeaderInitialXPOS）；
console.log（playerheadialypos）；
var isGameOver=false；
var阵列长度=30；
var worldTileSet=新阵列（阵列长度）；
var documentBody=document.body；
功能墙（X位置、Y位置）{
this.name='Wall'；
this.xPosition=xPosition；
this.yPosition=yPosition；
伊斯沃尔：对；
ctx.save（）；
ctx.rect（this.xPosition，this.yPosition，20，20）；//因为我们的键盘是30*30正方形（二维数组），所以600/30=20
ctx.clip（）；
ctx.drawImage（wallImage，this.xPosition，this.yPosition）；
ctx.restore（）；
}
功能弹琴头（X位置，Y位置）{
console.log（“X体坐标：+xPosition+”，Y体坐标：+yPosition”）；
this.name='Body'；
this.xPosition=xPosition；
this.yPosition=yPosition；
isPlayerBody：正确；
ctx.save（）；
ctx.rect（this.xPosition，this.yPosition，20,20）；
ctx.clip（）；
ctx.drawImage（playerHeadImage，this.xPosition，this.yPosition）；
ctx.restore（）；
}
函数processImages（）{
wallImage=新图像（）；
playerHeadMage=新图像（）；
wallImage.src='img/wall1.jpeg'；
playerHeadMage.src='img/red.jpg'；
}
函数setUpEnvironment（）{
如果（wallImage.complete）{
setUpNorthernGameBorder（）；
setUpSouthernGameBorder（）；
setUpEasternGameBorder（）；
设置WesterngameBorder（）；
回来
}
setTimeout（函数（）{
设置环境（）
}, 1000);
}
函数setUpPlayer（）{
如果（PlayerHeadMage.complete）{
警报（1）；
SetPlayerHeaderInitialPosition（）；
回来
}
setTimeout（函数（）{
setUpPlayer（）
}, 1000);
}
window.onload=function（）{/问题是您正在绘制整个红方块，而不是仅从中提取20x20部分，因此必须替换：

ctx.drawImage(playerHeadImage, this.xPosition, this.yPosition);

与：

ctx.drawImage(playerHeadImage, this.xPosition, this.yPosition, 20, 20);

仅从红方块图像中提取20x20。我个人建议，因为您只想使用fillrect绘制一个红方块，而不是像这样绘制图像：


ctx.save（）；
ctx.fillStyle=“红色”；
ctx.fillRect（this.xPosition，this.yPosition，20,20）；
ctx.clip（）；
ctx.restore（）；
是否只调用了一次“SetPlayerHeadinialPosition”函数？@Stakvino是的，它确实可以扫描您提供程序中使用的3个图像（红色、墙壁和草地），我正试图在浏览器上执行它。或者您可能有一个指向您的程序的JSFIDLE/codepen链接？首先，我想删除这一行：worldTileSet[29][29]=新的playerHead（580580）；在“SetPlayerHeaderInitialPosition”中，函数将删除右下角的红方块（它为我做了）。是的，它会删除。但这只是为了调试目的。主要问题是另一点非常感谢：）你节省了一天！
ctx.drawImage(playerHeadImage, this.xPosition, this.yPosition, 20, 20);