У меня есть следующий код. Я пытаюсь заставить мой сайт 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», в которой находятся мои изображения.
Что я делаю не так?