为什么这个Javascript/HTML5画布不起作用？

我正在尝试创建一个简单的游戏，按下左右按钮，一张图片应该会移动（并且在另一张图片，

trexf

和

trexb

之间变化）

浏览器不支持画布。

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
变量宽度、高度、rightKey=false、leftKey=false、upKey=false、downKey=false、rex_x、rex_y=300、trexf、trexb；
trexf=新图像（'trexf.png'）；
trexb=新图像（'trexb.png'）；
函数clearCanvas（）{
canvas.width=canvas.width；
}
函数drawRex（）{
如果（右键）{
rex_x+=5；
}else if（leftKey）{
rex_x-=5；
}
ctx.drawImage（trexf、rex_x、rex_y）；
if（rightKey==false | | leftKey==false）{
ctx.drawImage（trexb、rex_x、rex_y）；
}
}
函数循环（）{
clearCanvas（）；
drawRex（）；
}
功能键控（e）{
如果（e.keyCode==39）
rightKey=true；
否则如果（e.keyCode==37）
leftKey=true；
}
功能键控（e）{
如果（e.keyCode==39）
rightKey=false；
否则如果（e.keyCode==37）
leftKey=false；
}
函数init（）{
ctx.canvas.width=window.innerWidth-30；
ctx.canvas.height=window.innerHeight-30；
文件。addEventListener（'keydown'，keydown'，false）；
文件。添加的监听器（“keyup”，keyup，false）；
rex_x=画布宽度/2；
设置间隔（循环，1000）；
}
init（）；

在JSFIDLE上。

---

为什么这不能像我期望的那样工作？

这在Chrome中对我有效，但您的绘制间隔太大（1秒），因此在重画之前会触发“向上键”事件。

调低您的间隔计时器延迟计数：

---

它现在工作正常。

通过“没有像我预期的那样工作”，请让我们确切地知道它是如何工作的，以及您期望它如何工作。如果我们不知道这个问题，我们就无法解决：）什么都没有出现。我解释了它是如何工作的，但什么都没有发生。我收到一个未捕获异常位置JS Frame的错误，未捕获异常是什么意思？[21:47:49.346]未捕获异常：[异常…”组件返回故障代码：0x80040111（NS_错误\u不可用）[nsIDOMCanvasRenderingContext2D.drawImage]“nsresult:“0x8004011（NS_错误\u不可用）”位置：“JS框架：：file:///C:/Users/hassooni/Documents/Vis40/AR15.html ：：drawRex:：第68行“数据：否]也有此错误？！[21:54:22.348]不推荐使用getAttributeNodeNS（）。请改用getAttributeNS（）。@file:///C:/Users/hassooni/Documents/Vis40/AR15.html