Команда fillRect () в Javascript не работает - PullRequest
Новая
       7

Команда fillRect () в Javascript не работает

0 голосов
/ 09 мая 2018

Сейчас я занимаюсь разработкой игры, но натолкнулся на проблему, когда команда fillRect () не будет работать на холсте HTML5 с использованием Javascript. Я не знаю, почему это происходит, после того, как я попытался провести исследование и проверить мой код. HTML-код показан ниже: 

<!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>

Я не лучший специалист по Javascript, поэтому мало что знаю, что могло бы помочь мне понять причину, по которой прямоугольник не отображается, когда код верен.

Заранее благодарен за помощь по этому конкретному вопросу. :)

Ответы [ 3 ]

0 голосов
/ 09 мая 2018

Ошибка в event.cilentX, так как event в данный момент недоступна, поэтому не переходит к следующим строкам кода для выполнения. Если вы хотите поиграть с событием, вам необходимо прикрепить любого слушателя события, например canvas.addEventListener('click' , function (event){//here you will get the event});. Я только что прокомментировал две линии, теперь они отлично работают для рисования прямоугольника. 

<!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>
0 голосов
/ 10 мая 2018

Слушатели событий мыши нарушают работу программы.

Закомментируйте их, и это работает просто отлично

Вот фрагмент кода, который я использую для небольших игр 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;
}
0 голосов
/ 09 мая 2018

Вам нужно будет посмотреть функцию addEventListener в JS, чтобы лучше рассмотреть ситуацию. Вот рабочий пример: 

// 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, много сети разработчики имеют проблемы с конфликтной ситуацией, когда они используют много библиотек Для методологии динамического потока приложения используйте removeEventListener перед установкой флагов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...