Javascript 样式表在<；帆布>；

我正在用canvas做一个游戏，但我在方法

drawImage（…）上有一个小问题它应该裁剪精灵表以获得正确的精灵。当我们奔跑时，尤其是跳跃时，我们可以看到相邻精灵的碎片

（注意：如果要运行此代码，请确保运行Firefox或Chrome，因为只有这些浏览器才支持为
图像渲染提供的值）


var-ctx；
var heightCanvas；
帆布；
var播放器；
var reqAnim；
var停止；
左=假；
右=假；
向上=错误；
window.onload=函数（）{
var canvas=document.getElementById（'canvas'）；
heightCanvas=canvas.height；
widthCanvas=canvas.width；
ctx=canvas.getContext（'2d'）；
ctx.imageSmoothingEnabled=假；
//检测箭头键
document.onkeydown=函数（e）{
如果（e.keyCode==37）left=true；
如果（e.keyCode==39）right=true；
如果（e.keyCode==38）up=true；
}
document.onkeyup=函数（e）{
如果（e.keyCode==37）left=false；
如果（e.keyCode==39）right=false；
如果（e.keyCode==38）up=false；
}
//加载精灵工作表时，动画开始
img=新图像（）；
img.onload=函数（）{
玩家=新玩家（img，10,50）；
reqAnim=requestAnimationFrame（updateCanvas）；
停止=错误；
}
img.src=”https://i.imgur.com/6eKrMOI.png";
}
函数updateCanvas（）{
clearRect（0，0，宽度画布，高度画布）；
player.updatePos（）；
player.updateStatedDirection（）；
player.updateSprite（）；
player.updateDisplay（）
reqAnim=requestAnimationFrame（updateCanvas）；
}
函数startStop（）{
如果（停止）{
reqAnim=requestAnimationFrame（updateCanvas）；
停止=错误；
}否则{
取消动画帧（reqAnim）；
停止=真；
}
}
//----------------------------------//
//----------------------------------//
//----------玩家代码----------//
//----------------------------------//
//----------------------------------//
功能播放器（精灵表，x，y）{
this.spritesheet=spritesheet；
这个.x=x；
这个。y=y；
//玩家的方向。假=左，真=右
这个方向=真；
//玩家的状态。0=站立，1=跑步
该状态=0；
//精灵工作表中精灵的尺寸
这个宽度=41；
这个高度=40；
//所有以“ss”开头的属性都与精灵表相关。
//精灵工作表中当前精灵的坐标
这是0.ssX=0；
这个.ssY=200；
//重复当前精灵的次数
this.ssRepeat=0；
该速度=2.5；
这个重力=0.3；
这个重力速度=0；
这个跳跃=错误；
//状态：0=站立，1=运行
//方向：假=左，真=右
this.updateStatedDirection=函数（）{
if（left）{//如果按下left
如果（this.state！=1 | | | this.direction）{//
this.state=1；//或者如果他朝相反的方向跑
这是0.ssY=0；
}
这个方向=假；
}else if（right）{//如果按下right
如果（this.state！=1 | | |！this.direction）{//
this.state=1；//或者如果他朝相反的方向跑
这个.ssY=80；
}
这个方向=真；
}else如果（this.state！=0）{//如果未按下right或left且状态不为stand
该状态=0；
如果（该方向）this.ssY=200；
否则，这个.ssY=160；
}
}
this.updateSprite=函数（）{
如果（this.state==0）{//如果状态为stand
if（this.ssRepeat<15）//在传递到下一个精灵之前，我们将同一个精灵显示15次
这个.ssRepeat++；
否则{
this.ssRepeat=0；
如果（this.ssX<205）this.ssX+=this.width；//如果我们没有到达精灵表的末尾
否则，这个.ssX=0；
}
}else如果（this.state==1）{//如果该状态正在运行
if（this.ssRepeat<5）//在传递到下一个精灵之前，我们将同一个精灵显示5次
这个.ssRepeat++；
否则{
this.ssRepeat=0；
如果（this.ssX<205）this.ssX+=this.width；//如果我们没有到达精灵表的末尾
否则{
这是0.ssX=0；
if（this.ssY<40）this.ssY=40；//如果我们到达了SS的第一行的末尾
如果（this.ssY<80）this.ssY=0；//则为第二个
如果（this.ssY<120）this.ssY=120；//第三个
else this.ssY=80；//第四个
}
}
}
}
//显示精灵表的正确精灵
this.updateDisplay=函数（）{
ctx.drawImage（this.spritesheet，this.ssX，this.ssY，
这个宽度，这个高度，这个x，这个y，这个宽度，这个高度）；
}
//根据用户的输入更新精灵的位置
this.updatePos=函数（）{
这个.jump（）；
this.gravitySpeed+=this.gravity；
this.y+=this.gravitySpeed；
这个；
这个。移动（）；
}
this.hitbooth=函数（）{
var rockbottom=heightCanvas-this.height；
如果（this.y>rockbottom）{
y=最低点；
这个重力速度=0；
这个跳跃=错误；
}
}
this.move=函数（）{
如果（左）player.x-=此速度；
如果（右）player.x+=此速度；
}
this.jump=函数（）{
如果（！这个跳跃）{
如果（向上）{
这个重力速度=-5.2；
这是真的；
}
}
}
}

福托
帆布{
边框：1px纯黑；
背景色：#9e9eaf；
图像渲染：optimizespeed；/*Firefox*/
图像渲染：像素化；/*铬*/
}


启动/停止
对于像素艺术，始终以整数值绘制，以避免关闭的精灵流血

这意味着，您的上下文也必须将其转换矩阵设置为整数值，并对传递给
drawImage
方法的所有值进行四舍五入

在代码中，对象的
x
和
y
值在移动时是浮动值，因为
重力
和
速度
值是浮动的。