无法使用 getContext 将图像渲染到游戏的 Canvas 上

Question

我有以下代码。我正在尝试让我的 HTML 站点在我的 canvas 上呈现背景图像 (bg) 和管道图像（pipeNorth 和 pipeSouth）。

我正在使用 chrome。

第一次密码尝试

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

第二次密码尝试

<!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" 的子文件夹，其中包含我的图片。

我做错了什么？

Answer 1

发生这种情况是因为您试图在设置图像的 .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>

无法使用 getContext 将图像渲染到游戏的 Canvas 上

Cannot Render Images onto Canvas for Game Using getContext

html

javascript

canvas

image

call