Javascript 为什么我的drawImage不接受'；0+；常数'；对于it'；她身高多少？

我正在制作一只香草JS Flappy Bird，并试图通过将

pipeBottom

的高度设置为

pipeTop

的高度，再加上一个应该用作间隙的变量，在

pipeTop

和

pipeBottom

之间创建间隙

我正在学习一个教程，我的代码似乎与教程中的代码相同——尽管我的管道图像彼此重叠，而不是以间隙显示

---

0+常数

应使底部管道的高度等于间隙+管道顶部的高度，但情况并非如此。相反，底部管道与顶部管道重叠。（如上图所示）

Javascript以异步方式进行操作，包括加载图像。如果在代码中设置

src

，则不会立即加载图像。因此，当设置

常数时，
管道顶部高度
为零。您需要在加载所有内容后再进行设置。
谢谢！将我的
管道变量
移动到等待
加载的函数中
// Canvas and getContext

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


// Load Images

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeTop = new Image();
var pipeBottom = new Image();

bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeTop.src = "images/pipeTop.png";
pipeBottom.src = "images/pipeBottom.png";

// pipe vars

var gap = 100;
var constant = pipeTop.height+gap;

// Draw Images

window.onload = function draw() {

    ctx.drawImage(bg,0,0);

    ctx.drawImage(pipeTop, 100, 0);
    ctx.drawImage(pipeBottom, 100, 0+constant);
    ctx.drawImage(fg,0, cvs.height - fg.height);
};

draw();