我有以下代码。我试图让我的 HTML 站点在我的画布上呈现背景图像 (bg) 和管道图像（pipeNorth 和 pipeSouth）。我正在使用铬。第一次代码尝试<!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); }但无论我尝试什么，我都无法显示图像。我的代码在模板文件夹中。模板文件夹包含一个名为“图像”的子文件夹，其中包含我的图片。我究竟做错了什么？
添加回答
举报
0/150
提交
取消