Javascript中的fillRect（）命令不起作用

我目前正在开发一款游戏，但我偶然发现了一个问题，即fillRect（）命令无法使用Javascript在HTML5画布上运行。我不知道为什么会发生这种情况，在尝试对其进行研究并检查我的代码之后。HTML代码如下所示：

立方体探索
#游戏{
边框：1px黑色虚线；
}
您的浏览器不支持HTML5中的canvas元素。
var clicked=false；//鼠标处理事件
var mouseX=event.cilentX；//鼠标X坐标
var mouseY=event.cilentY；//鼠标Y坐标
var canvas=document.getElementById（“游戏”）；//帆布
var ctx=canvas.getContext（“2d”）；//帆布
ctx.fillStyle='黑色'；//矩形颜色选择
ctx.fillRect（10,10,150,80）；

您需要查看JS中的addEventListener函数，以便更好地了解情况。 以下是工作示例：

//全局
var canvas=document.getElementById（“游戏”）；
var clicked=false；//鼠标处理事件
var-mouseX=0；
var-mouseY=0；
//YOUR应用程序参数
变量应用={
clearCanvas：没错，
标题：“你好”
};
canvas.addEventListener（'click'，函数（事件）{
mouseX=event.pageX；//鼠标X坐标
mouseY=event.pageY；//鼠标Y坐标
log（“鼠标x:+mouseX+”鼠标y:+mouseY）；
再抽一次（）；
});
//初抽
var ctx=canvas.getContext（“2d”）；//帆布
ctx.fillStyle='黑色'；//矩形颜色选择
ctx.fillRect（mouseX，mouseY，350,65）；
ctx.font=“30px Arial”；
ctx.fillStyle='石灰'；
ctx.fillText（app.title+“X:+mouseX+”Y:+mouseY，mouseX+35，mouseY+40250）
//需要的时候画画
再次调用函数（）{
如果（app.clearCanvas==true）{
clearRect（0，0，canvas.width，canvas.height）；
}
ctx.fillStyle='黑色'；//矩形颜色选择
ctx.fillRect（mouseX，mouseY，350,65）；
ctx.fillStyle='石灰'；
ctx.fillText（app.title+“X:”+mouseX+“Y:”+mouseY，mouseX+35，mouseY+40400）
}

立方体探索
#游戏{
边框：1px黑色虚线；
}
您的浏览器不支持HTML5中的canvas元素。
在
event.cilentX中出现错误，因为
event
此时不可用，因此不会移动到下一行代码执行。如果你想玩事件，你需要附加任何事件监听器，比如
canvas.addEventListener（'click'，function（event）{//这里你会得到事件}）。我刚刚评论了这两条线，现在画矩形效果很好



立方体探索
#游戏{
边框：1px黑色虚线；
}
您的浏览器不支持HTML5中的canvas元素。
var clicked=false；//鼠标处理事件
//var mouseX=event.cilentX；//鼠标X坐标
//var mouseY=event.cilentY；//鼠标Y坐标
var canvas=document.getElementById（“游戏”）；//帆布
var ctx=canvas.getContext（“2d”）；//帆布
ctx.fillStyle='黑色'；//矩形颜色选择
ctx.fillRect（10,10,150,80）；
是您的鼠标事件侦听器破坏了程序

把它们注释掉，效果很好

下面是我测试的小JavaScript游戏的代码片段

//Mouse Events ==================
document.onmousemove = mousePos;
document.onmousedown = function() { mouse.clicked = true; };
document.onmouseup = function() { mouse.clicked = false; };

//MOUSE 
var mouse = {
  x: 0,
  y: 0,

  clicked: false
};

function mousePos (e) {
    mouse.x = e.pageX - canvas.offsetLeft;
    mouse.y = e.pageY - canvas.offsetTop;
}