Невозможно рендерить изображения на холст для игры, используя getContext - PullRequest
Новая
       22

Невозможно рендерить изображения на холст для игры, используя getContext

0 голосов
/ 19 июня 2019

У меня есть следующий код. Я пытаюсь заставить мой сайт HTML отображать фоновое изображение (bg) и изображения канала (pipeNorth и pipeSouth) на холсте.

Я использую хром.

1-Й КОД ПОПЫТКА 

<!DOCTYPE html>
<html>

<head>
    <title>Flappy Bird using JS | by Pinzhi</title>
  </head>
  <body>
   <h3>flappyBird by pineNuts</h3>

   <canvas id="canvas" width="288" height="512"></canvas>


   <script>

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

    // create variables

    var gap = 75; 
    var constant = pipeNorth.height + gap; 

    // load images

    var bird = new Image(); 
    var bg = new Image(); 
    var fg = new Image();  
    var pipeNorth = new Image(); 
    var pipeSouth = new Image();  

    bird.src = "/home/pinzhi/Desktop/js_games/flappy_bird/templates/images/bird.png"; 
    bg.src = "/home/pinzhi/Desktop/js_games/flappy_bird/templates/images/bg.png";

    //fg.src = "images/fg.png";
    pipeNorth.src = "images/pipeNorth.png";
    pipeSouth.src = "images/pipeSouth.png";


    // draw images 

    function draw(){

        ctx.drawImage(bg, 0, 0); 
        ctx.drawImage(pipeNorth, 100, 0); 
        ctx.drawImage(pipeSouth, 100, 0 + constant)
    }

    draw(); 



   </script>
  </body>
</html>

2-я попытка кода 

<!DOCTYPE html>
<html>

<head>
    <title>Flappy Bird using JS | by Pinzhi</title>
  </head>
  <body>
   <h3>flappyBird by pineNuts</h3>

   <canvas id="canvas" width="288" height="512"></canvas>


   <script>

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

    // create variables

    var gap = 75; 
    var constant = pipeNorth.height + gap; 

    // load images

    var bird = new Image(); 
    var bg = new Image(); 
    var fg = new Image();  
    var pipeNorth = new Image(); 
    var pipeSouth = new Image();  


    bg.onload = function(e) {
     ctx.drawImage(e.target, 0, 0);
    }

     pipeNorth.onload = function(e) {
     ctx.drawImage(e.target, 100, 0);
    }

    pipeSouth.onload = function(e) {
     ctx.drawImage(e.target, 100, 0 + constant);
   }



   bg.src = "/home/pinzhi/Desktop/js_games/flappy_bird/templates/images/bg.png";
   pipeNorth.src = "images/pipeNorth.png";
   pipeSouth.src = "images/pipeSouth.png";



    // // draw images 

    // function draw(){

    //     ctx.drawImage(bg, 0, 0); 
    //     ctx.drawImage(pipeNorth, 100, 0); 
    //     ctx.drawImage(pipeSouth, 100, 0 + constant)
    // }

    // draw(); 



   </script>
  </body>
</html>

Но что бы я ни старался, я не могу заставить изображения отображаться. Мой код находится в папке шаблонов. Папка шаблона содержит подпапку с названием «images», в которой находятся мои изображения.

Что я делаю не так?

1 Ответ

0 голосов
/ 19 июня 2019

Это происходит потому, что вы пытаетесь нарисовать их сразу после установки свойства .src изображения. В настоящее время он может быть еще не загружен, поэтому вам нужно дождаться события onload перед вызовом drawImage (). 

   bg.onload = function(e) {
     ctx.drawImage(e.target, 0, 0);
   }
   pipeNorth.onload = function(e) {
     ctx.drawImage(e.target, 100, 0);
   }
   pipeSouth.onload = function(e) {
     ctx.drawImage(e.target, 100, 0 + constant);
   }

   bg.src = "/home/pinzhi/Desktop/js_games/flappy_bird/templates/images/bg.png";
   pipeNorth.src = "images/pipeNorth.png";
   pipeSouth.src = "images/pipeSouth.png";

Вот пример использования вашего кода: 

var cvs = document.getElementById("canvas")
var ctx = cvs.getContext("2d");
var constant;
// create variables

var gap = 75;

// load images

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();

var imagesLoaded = 0;
bg.onload = function(e) {
  imagesLoaded++;
  draw();
}
pipeNorth.onload = function(e) {
  imagesLoaded++;
  constant = pipeNorth.height + gap;
  draw();
}
pipeSouth.onload = function(e) {
  imagesLoaded++;
  draw();
}

function draw() {
  if (imagesLoaded == 3) {
    ctx.drawImage(bg, 0, 0);
    ctx.drawImage(pipeNorth, 100, 0);
    ctx.drawImage(pipeSouth, 100, 0 + constant);
  }
}

bg.src = "https://picsum.photos/id/719/288/512";
pipeNorth.src = "https://picsum.photos/id/71/64/64";
pipeSouth.src = "https://picsum.photos/id/76/64/64";
<canvas id="canvas" width="288" height="512"></canvas>
...