Javascript 在P5.js中合并图像

我正在p5.js上制作一个游戏，我想合并每个组件的图像以获得游戏的背景，但是使用createGraphics不起作用。代码如下：

createGameMapImg（）{
让gameImg=createGraphics（this.width*this.boxSize，this.height*this.boxSize）；
游戏背景（颜色（“白色”）；
for（让此.components的组件）{
图像（component.img、component.x*this.boxSize、component.y*this.boxSize、component.width*this.boxSize、component.height*this.boxSize）；
如果（component.img！=未定义）gameImg.image（component.img，component.x*this.boxSize，component.y*this.boxSize，component.width*this.boxSize，component.height*this.boxSize）；
}
返回gameImg；
}

编辑 在阅读了几个小时的代码后，我终于明白发生了什么：

我有一个包含所有组件定义的JSON（包括URL img）

我将这个JSON发送给一个管理组件呈现的类

我在预加载时调用构造函数，但如果不这样做，组件映像将无法加载：

---

想法是在加载JSON之后，方法createComponents加载不同的图像。

如果代码有问题，从您发布的最小部分来看，这是不明显的。最可能的问题是如何加载图像或使用生成的

p5.Graphics

实例。下面是一个工作示例，我用一个简单的用例填空：

const boxSize=1；
让组件；
让游戏地图；
函数预加载（）{
//我们需要在预加载中加载图像，以确保在绘制图像时它们可用
让tree=loadImage（'https://www.paulwheeler.us/files/tree.png');
组件=[{
img:loadImage（'https://www.paulwheeler.us/files/game_map.png'),
x:0,，
y:0，
宽度：200，
身高：200
},
{
img：树，
x:20，
y:100，
宽度：56，
身高：70
},
{
img：树，
x:120，
y:20，
宽度：56，
身高：70
}
];
}
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
gameMap=createGameMapImg（）；
}
函数绘图（）{
让尺寸=最小值（宽度、高度）；
图像（游戏地图，0，0）；
}
函数createGameMapImg（）{
让gameImg=createGraphics（宽度*框大小，高度*框大小）；
游戏背景（颜色（“白色”）；
for（让组件中的组件）{
//我不知道你的代码中为什么会有这个，因为它看起来
//就像我们的目标是把图像画到摄像机上一样
//图形对象：
//图像（component.img、component.x*boxSize、component.y*boxSize、component.width*boxSize、component.height*boxSize）；
如果（component.img！=未定义）{
gameImg.image(
component.img，
组件x*boxSize，
组件。y*boxSize，
component.width*boxSize，
组件高度*boxSize
);
}
}
返回gameImg；
}

---

您能否演示如何定义

此.components

和

此.boxsize

？还有你怎么称呼这个方法？欢迎来到StackOverflow@Sonya。虽然将问题中的代码减少到基本元素是很好的，但您确实需要包含足够的代码，以使您的问题具有可复制性（请参见：）。对于p5js，您几乎应该始终在问题中包含一个可运行的代码段：@Sonya您正在调用

image（）

，它直接呈现在p5的默认画布中：相反，您希望呈现到

p5.Graphics

实例中：

gameImg.image（…）

。Paul的详细示例说明了这一点（+1）

this.componetsJSON = loadJSON(componetsJSON, () => this.components = this.createComponets());