Почему холст не загружается?

ProgramBox

Почему холст не загружается?

Post author:admin
Запись опубликована:18 января, 2022
Post category:Вопросы по программированию

#javascript #html

Вопрос:

Я запрограммировал небольшую игру внутри тинкера. Внутри все работает совершенно нормально. Но когда я переношу его в html-файл и загружаю в браузер, это просто пустой экран. Я знал, что в прошлом Тинкер делал некоторые дерзкие вещи, чтобы заставить ваш код работать. Интересно, есть ли какая-то функция «пробуждения», которую вы должны вызвать, чтобы запустить скрипт. Проблема, вероятно, действительно очевидна, у меня нет такого большого опыта программирования.

 <!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id= "myCanvas" width= "500" height= "500"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    
    // Set up background image
    var background = new Image();
    background.src = "/assets2/assets/57b614dfaf9231f5688b4576.png";
    background.onload = function() {
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        start();
    }
    
    // Set up ships
    var pointsBiden = 0;
    var pointsTrump = 0;
    
    var image1 = new Image();
    var image1x
    var image1y
    
    var image2 = new Image();
    var image2x
    var image2y
    
    var donaldstop = false;
    var bidenstop = false;
    
    var bidenTurn = false;
    var trumpTurn = true;
    
    function wait(stop,waitsecs) {
        setTimeout(stop, waitsecs);
    }

    function donothing() {
        //
    }
    
    
    function start(){
            image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp";
            image1.onload = function(){
            image1x = 0;
            image1y = 250;
            ctx.drawImage(image1, image1x, image1y);
        }
            image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
            image2.onload = function(){   
            image2x = 300;
            image2y = 250;
            ctx.drawImage(image2, image2x, image2y);
        
           }
        }   
    

    document.addEventListener("keydown", keyDownHandler);
    
    
    function keyDownHandler(event){
        if (event.keyCode == 32) {
            donaldstop = true;
            console.log("easter egg! (   your pretty cool :)  )")
            function fixTrump() {
                donaldstop = false;
            }
            wait(fixTrump, 1000)
        }
        if (event.keyCode == 9) {
            bidenstop = true;
            function fixBiden() {
                bidenstop = false;
            }
            wait(fixBiden, 1000)
        }
        
         if (donaldstop == false) {
           if (event.keyCode == 37) {
                image1x = image1x - 50;
           } else if (event.keyCode == 38) {
              image1y = image1y - 50;
           } else if (event.keyCode == 39) {
              image1x = image1x   50;
           } else if (event.keyCode == 40) {
              image1y = image1y   50;
           }
         }
        // Add cases for WASD keys, to change coordinates of image2
        if (bidenstop == false) {
            if (event.keyCode == 87) {
                image2y = image2y - 50;
            } else if (event.keyCode == 65) {
                image2x = image2x - 50;
            } else if (event.keyCode == 83) {
                image2y = image2y   50;
            } else if (event.keyCode == 68) {
                image2x = image2x   50;
            }
        }
        if (bidenTurn == true) {
            if (image1x == image2x amp;amp; image1y == image2y) {
                image1x = 0;
                image1y = 250;
        
                image2x = 300;
                image2y = 250;
                pointsBiden = pointsBiden   1;
                
                bidenTurn = false;
                trumpTurn = true;
            }
        }
        if (trumpTurn == true) {
            if (image1x == image2x amp;amp; image1y == image2y) {
                image1x = 0;
                image1y = 250;
        
                image2x = 300;
                image2y = 250;
                pointsTrump = pointsTrump   1;
                
                trumpTurn = false;
                bidenTurn = true;
            }
        }
        
        redraw();
    }
    
    
    
    function redraw() {

        if (trumpTurn == true) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
                
                image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
                image2.onload = function(){
                ctx.drawImage(image2, image2x, image2y);
            }
                image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
                image1.onload = function(){
                ctx.drawImage(image1, image1x, image1y);
            }
         }
        
        if (bidenTurn == true) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
                
            image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
            image1.onload = function(){
            ctx.drawImage(image1, image1x, image1y);
            }
            image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
            image2.onload = function(){   
            ctx.drawImage(image2, image2x, image2y);
        
            }
        }
        
        
        ctx.font = "60px Verdana";
        ctx.fillText(pointsBiden, image2x   80, image2y - 100);
        ctx.fillText(pointsTrump, image1x   80, image1y - 100);
    }
</script>
</body>
</html>

Ответ №1:

Проблема в том, что src, который вы предоставляете для своего фона.

"/assets2/assets/57b614dfaf9231f5688b4576.png" это относительный путь. Это означает, что когда вы использовали это в tynker, у вас, вероятно, была папка под названием «assets2» в вашем проекте и т. Д. который содержал файл для изображения, которое вы хотели использовать в качестве фона. Если вы просто переместите свой код в HTML-файл, не добавляя в свой код другие ресурсы, которые вы используете и которые, как ожидается, будут частью папки вашего проекта, вы получите сообщение об ошибке.

В принципе, вам нужно поместить свой HTML-файл и любые локальные изображения, которые может использовать ваш проект, в папку проекта. Тогда вы сможете успешно запустить игру.

Ответ №2:

Вы должны проверить каталог , указанный в background.src , возможно, вы указали неправильный каталог, потому что при использовании ссылки вместо предоставленного изображения это работает.

 <!DOCTYPE html>
<html>

<head>
</head>

<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // Set up background image
    var background = new Image();
    background.src = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"; // Changed this line only
    background.onload = function() {
      ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
      start();
    }

    // Set up ships
    var pointsBiden = 0;
    var pointsTrump = 0;

    var image1 = new Image();
    var image1x
    var image1y

    var image2 = new Image();
    var image2x
    var image2y

    var donaldstop = false;
    var bidenstop = false;

    var bidenTurn = false;
    var trumpTurn = true;

    function wait(stop, waitsecs) {
      setTimeout(stop, waitsecs);
    }

    function donothing() {
      //
    }


    function start() {
      image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp";
      image1.onload = function() {
        image1x = 0;
        image1y = 250;
        ctx.drawImage(image1, image1x, image1y);
      }
      image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
      image2.onload = function() {
        image2x = 300;
        image2y = 250;
        ctx.drawImage(image2, image2x, image2y);

      }
    }


    document.addEventListener("keydown", keyDownHandler);


    function keyDownHandler(event) {
      if (event.keyCode == 32) {
        donaldstop = true;
        console.log("easter egg! (   your pretty cool :)  )")

        function fixTrump() {
          donaldstop = false;
        }
        wait(fixTrump, 1000)
      }
      if (event.keyCode == 9) {
        bidenstop = true;

        function fixBiden() {
          bidenstop = false;
        }
        wait(fixBiden, 1000)
      }

      if (donaldstop == false) {
        if (event.keyCode == 37) {
          image1x = image1x - 50;
        } else if (event.keyCode == 38) {
          image1y = image1y - 50;
        } else if (event.keyCode == 39) {
          image1x = image1x   50;
        } else if (event.keyCode == 40) {
          image1y = image1y   50;
        }
      }
      // Add cases for WASD keys, to change coordinates of image2
      if (bidenstop == false) {
        if (event.keyCode == 87) {
          image2y = image2y - 50;
        } else if (event.keyCode == 65) {
          image2x = image2x - 50;
        } else if (event.keyCode == 83) {
          image2y = image2y   50;
        } else if (event.keyCode == 68) {
          image2x = image2x   50;
        }
      }
      if (bidenTurn == true) {
        if (image1x == image2x amp;amp; image1y == image2y) {
          image1x = 0;
          image1y = 250;

          image2x = 300;
          image2y = 250;
          pointsBiden = pointsBiden   1;

          bidenTurn = false;
          trumpTurn = true;
        }
      }
      if (trumpTurn == true) {
        if (image1x == image2x amp;amp; image1y == image2y) {
          image1x = 0;
          image1y = 250;

          image2x = 300;
          image2y = 250;
          pointsTrump = pointsTrump   1;

          trumpTurn = false;
          bidenTurn = true;
        }
      }

      redraw();
    }



    function redraw() {

      if (trumpTurn == true) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

        image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
        image2.onload = function() {
          ctx.drawImage(image2, image2x, image2y);
        }
        image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
        image1.onload = function() {
          ctx.drawImage(image1, image1x, image1y);
        }
      }

      if (bidenTurn == true) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

        image1.src = "https://m-cdn.phonearena.com/images/article/78433-wide/Trump-other-GOP-presidential-hopefuls-take-shots-at-Apple-for-refusing-to-obey-a-court-order.webp"
        image1.onload = function() {
          ctx.drawImage(image1, image1x, image1y);
        }
        image2.src = "https://cdn.vanderbilt.edu/vu-news/files/20190417212447/Joe_Biden_slider-200x200.jpg"
        image2.onload = function() {
          ctx.drawImage(image2, image2x, image2y);

        }
      }


      ctx.font = "60px Verdana";
      ctx.fillText(pointsBiden, image2x   80, image2y - 100);
      ctx.fillText(pointsTrump, image1x   80, image1y - 100);
    }
  </script>
</body>

</html>

Метки: Почему холст не загружается?