Question

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

＆＃13;

<!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; // Mouse handling event
            var mouseX = event.cilentX; // Mouse X coordinate
            var mouseY = event.cilentY; // Mouse Y coordinate
            var canvas = document.getElementById("game"); // For canvas
            var ctx = canvas.getContext("2d"); // For canvas
            
            ctx.fillStyle = 'black'; // rectangle color selection
            ctx.fillRect(10, 10, 150, 80);
        </script>
    </body>
</html>

＆＃13;

我不是Javascript的最佳专家，所以我知道哪些可以帮助我理解代码正确时没有矩形显示的原因。

我提前感谢您对此具体问题的帮助。：）

Answer 1

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

// globals
        var canvas = document.getElementById("game");
        var clicked = false; // Mouse handling event
        var mouseX = 0;
        var mouseY = 0;
 
        // yuor application parameters
        var app = {
            clearCanvas: true,
            title: 'HELLO'
        };
        
        canvas.addEventListener('click' , function (event){
        
            mouseX = event.pageX; // Mouse X coordinate
            mouseY = event.pageY; // Mouse Y coordinate
            
            console.log("Mouse x : " + mouseX + " Mouse y :" + mouseY );
            drawAgain();
        
        });
        
        // Initial draw
        var ctx = canvas.getContext("2d"); // For canvas
        ctx.fillStyle = 'black'; // rectangle color selection
        ctx.fillRect(mouseX, mouseY, 350, 65);
        ctx.font="30px Arial";   
        ctx.fillStyle = 'lime';
        ctx.fillText(app.title + "X:" + mouseX + " Y:" + mouseY , mouseX + 35, mouseY + 40, 250)
        
        // Draw when you need
        function drawAgain () {
            
            if (app.clearCanvas == true){
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
             
            ctx.fillStyle = 'black'; // rectangle color selection
            ctx.fillRect(mouseX, mouseY, 350, 65);
            
            ctx.fillStyle = 'lime';
            ctx.fillText(app.title + " X:" + mouseX + " Y:" + mouseY , mouseX + 35, mouseY + 40, 400)
            
       }

<!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>
        
        </script>
    </body>
</html>

建议：还要学习使用removeEventListener，很多网页开发人员在使用时遇到事件冲突的情况很多lib的。对于动态应用程序流方法，请使用removeEventListener 在设置标志之前。

Answer 2

event.cilentX中出现错误，因为此时event不可用，因此不会移动到下一行代码执行。如果你想玩事件，你需要附加任何事件监听器，如canvas.addEventListener('click' , function (event){//here you will get the event});。我刚刚评论了这两行，现在它可以正常绘制矩形。

＆＃13;

<!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; // Mouse handling event
           // var mouseX = event.cilentX; // Mouse X coordinate
           // var mouseY = event.cilentY; // Mouse Y coordinate
            var canvas = document.getElementById("game"); // For canvas
            var ctx = canvas.getContext("2d"); // For canvas
            
            ctx.fillStyle = 'black'; // rectangle color selection
            ctx.fillRect(10, 10, 150, 80);
        </script>
    </body>
</html>

＆＃13;

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

2 个答案: