p5.j​​s中的乒乓球游戏 - 背景图像无法正确加载

Question

我正在使用名为p5的javascript框架。我正在尝试将我的Pong游戏的背景设置为我在网上找到的图像。我按照我可以找到的所有引用来尝试使其工作，但由于某种原因，后台不会自行更新。我最终获得了a line of chickens（我的比赛中的球）。背景中唯一可以正常工作的部分是左上角。

var sticks = [];
var ball;
var wallDis = 50;
// var imgs = [];
var score = [];

function preload(){
    chick = loadImage('images/chick.png');
    farm = loadImage('images/Farm.jpg');
}

function setup(){
    createCanvas(600, 600);
    sticks[0] = new Stick([enter image description here][1]wallDis);
    sticks[1] = new Stick(width-wallDis);
    ball = new Ball(chick);
    score[0] = new ScoreBoard(width/3, 50);
    score[1] = new ScoreBoard(width*2/3, 50);
}

function draw(){
    background(farm);
    // resizeCanvas(img.width, img.height);
    for(var i =0; i<sticks.length; i++){
        sticks[i].move();
        sticks[i].show();
    }

    ball.move();
    ball.show();
    ... etc

Answer 1

background()函数不会拉伸图像以适合画布的大小。来自the reference，强调我的：

  

p5.Image：使用loadImage（）或createImage（）创建的图像，设置为背景（必须与草图窗口的大小相同）

这就是为什么你在左上角看到图片的原因。

要解决您的问题，只需将图片尺寸调整为与草图相同的尺寸即可。你可以提前做到这一点，或者你也可以使用the reference中的便捷功能。