JavaScript中fillRect()方法无法在HTML5 Canvas生效的问题求助

嘿，我来帮你排查这个问题！你的代码里有两个关键错误导致矩形无法显示，咱们一步步拆解：

1. 拼写错误：cilentX/Y → clientX/Y #

你写的mouseX = event.cilentX和mouseY = event.cilentY里，cilent是拼写失误，正确的属性名应该是client（少了一个字母r）。不过这还不是最致命的问题——

2. 过早访问event对象导致脚本中断 #

当脚本一开始就执行var mouseX = event.cilentX时，页面还没有触发任何鼠标事件，event对象根本不存在，浏览器会直接抛出ReferenceError: event is not defined的错误。这个错误会让脚本直接停止运行，后面的canvas初始化和绘制代码根本没机会执行！

修正后的完整代码 #

我把错误修复了，还调整了鼠标坐标的获取逻辑（如果需要实时获取鼠标位置，应该在事件监听器里处理）：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Cube Quest</title> 
    <style> 
        #game { border: 1px dashed black; } 
    </style> 
</head> 
<body> 
    <canvas id="game" width='1280' height='720'>Your browser does not support the canvas element in HTML5.</canvas> 
    <script> 
        var clicked = false; 
        // 先初始化鼠标坐标，在事件触发时更新
        var mouseX = 0; 
        var mouseY = 0; 

        // 添加鼠标移动事件监听器来获取坐标
        document.addEventListener('mousemove', function(event) {
            mouseX = event.clientX; 
            mouseY = event.clientY; 
            // 如果需要实时响应鼠标位置绘制，可在这里添加逻辑
        });

        var canvas = document.getElementById("game"); 
        var ctx = canvas.getContext("2d"); 

        ctx.fillStyle = 'black'; 
        ctx.fillRect(10, 10, 150, 80); 
    </script> 
</body> 
</html>

额外小提示 #

• 遇到JS问题时，记得打开浏览器开发者工具（按F12），切换到Console标签，这里会显示脚本运行时的错误信息，是排查问题的好帮手！
• 如果暂时不需要鼠标坐标功能，也可以直接删掉那两行错误的mouseX/mouseY定义，这样绘制代码也能正常执行。

内容的提问来源于stack exchange，提问作者kaleb