无法使用 getContext 将图像渲染到画布上进行游戏

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

我正在使用铬。

第一次代码尝试

<!DOCTYPE html>

<html>

<head>

<title>Flappy Bird using JS | by Pinzhi</title>

</head>

<body>

<h3>flappyBird by pineNuts</h3>

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>

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);

}

但无论我尝试什么，我都无法显示图像。我的代码在模板文件夹中。模板文件夹包含一个名为“图像”的子文件夹，其中包含我的图片。

我究竟做错了什么？

GCT1015

浏览 319回答 1

无法使用 getContext 将图像渲染到画布上进行游戏

1回答