Javascript 将数组转换为函数调用内的单个参数

我试图在HTML画布上为您制作一款点击式冒险视频游戏。我有一个图像阵列。我想将其转换为单个参数，这样我就可以执行类似于

image[1]

的操作，当这种情况发生时，选定的图像数组元素将显示为画布上的背景。参数位于函数调用内部

那么，在调用包含多个参数的特定函数时，如何将数组转换为单个参数，更具体地说是

image

参数

代码必须使用普通JavaScript

CSS

香草JavaScript

/**Array of Images**/
var imgArray = [
    "gameImages/titleScreen.png",
    "gameImages/titleScreen1.png",
    "gameImages/titleScreenBW.png",
    "gameImages/startScreen.png",
    "gameImages/startScreenBW.png",
    "gameImages/forestTrail.png",
    "gameImages/forestTrailBW.png",
    "gameImages/jewleryOnLog.png",
    "gameImages/jewleryOnLogBW.png",
    "gameImages/sunlitWaterFall.png",
    "gameImages/sunlitWaterFalBW.png",
    "gameImages/sunlitWaterFall.png",
    "gameImages/sunsetStarySky.png",
    "gameImages/sunsetStarySkyBW.pn",
    "gameImages/campSunset.png",
    "gameImages/campSunsetBW.png",
    "gameImages/LoveHeart.png",
    "gameImages/LoveHeartBW.png",
    "gameImages/nightSky2BW.png",
    "gameImages/nightSky2.png",
    "gameImages/nightSkyAnimate.gif"
];

function drawImageProp(ctx, image, x, y, w, h, offsetX, offsetY) {

//Function Code for resizing images to fit canvas proportions...

ctx.drawImage(image, cx, cy, cw, ch, x, y, w, h);

}


drawImageProp(ctx, image, 0, 0, width, height); //I want to change image to get the array image element

/**Right now, the image parameter on Adobe Dreamweaver displays the error "'image' is not defined. [no-undef]"
**/

我尝试了

drawImageProp.apply（null，imgArray）

和其他apply方法，尽管我无法找到它的用途，因为我没有将所有数组元素都转换为参数

我尝试了一个

for（）{}

循环：

for（变量i=0；i

但由于缺乏知识，我无法确定它是否有效

---

如果此代码有改进，或者有更好的方法将图像作为背景插入HTML画布中，作为点击式冒险视频游戏中绘制或显示场景/事件的一部分，请给出详细解释的答案。非常感谢。

我对您的代码进行了一些修改，以展示如何解决此问题。问题的关键在于你：

• 需要

  Image

  元素才能绘制到画布中，而不是它们的URL
• 需要等待加载所有图像，然后才能绘制它们

//首先，我们必须将所有图像转换为图像对象，并等待它们加载。这不是一次做所有事情的效率（慢），但为了清楚起见，我现在就这样做。
var Imgaray=[
“gameImages/titleScreen.png”，
“gameImages/titleScreen1.png”，
“gameImages/titleScreenBW.png”，
“gameImages/startScreen.png”，
“gameImages/startScreenBW.png”，
“gameImages/forestTrail.png”，
“gameImages/forestTrailBW.png”，
“gameImages/jewleryOnLog.png”，
“gameImages/jewleryOnLogBW.png”，
“gameImages/sunlit瀑布.png”，
“gameImages/sunlitwaterbalbw.png”，
“gameImages/sunlit瀑布.png”，
“gameImages/sunsetStarySky.png”，
“gameImages/sunsetStarySkyBW.pn”，
“gameImages/campSunset.png”，
“gameImages/campSunsetBW.png”，
“gameImages/LoveHeart.png”，
“gameImages/LoveHeartBW.png”，
“gameImages/nightSky2BW.png”，
“gameImages/nightSky2.png”，
“gameImages/nightSkyAnimate.gif”
].map（sourceUrl=>{
//我们将把每个URL映射到一个图像对象，并告诉它在收到加载事件后只说它已就绪（也称为“已解析”）。
返回新承诺（（解决、拒绝）=>{
const img=新图像；
addEventListener（'load'，e=>resolve（img））；
img.addEventListener（‘错误’，拒绝）；
img.src=源URL；
});
});
函数drawImageProp（ctx、图像、x、y、w、h、offsetX、offsetY）{
ctx.drawImage（图像，cx，cy，cw，ch，x，y，w，h）；
}
//现在，我们将告诉浏览器仅在加载所有IMAG后执行以下操作：
//注意：如果只有一个图像有错误，代码将失败。
//这方面的故障保护是您需要解决的另一批问题。
承诺。全部（伊姆加里）。然后（所有图像=>{
//allImages将包含一组图像元素，您现在可以使用这些元素
//传递到画布上逐个绘制。不确定要在此处完成什么，
//但以下内容至少不应该出错。
allImages.forEach（图像=>{
drawImageProp（ctx、图像、0、0、宽度、高度）；
});
}，错误=>{
log（'a image在加载时抛出了一个错误，中止了所有操作'，error）；
});还有几个步骤，因为canvas draw函数不能为您加载图像，您必须将URL分配给图像对象，等待加载，然后再绘制。您还没有包括任何名为image的实际变量，因此它显然是未定义的。我认为知识的差距可能太大了，无法在这里即时填补。。。最好阅读有关MDN的文档和示例：如果我将image参数指定为变量，我是否需要
var image=new image（）？另外，您是否有任何参考资料或来源供您进行评论？我已经添加了我的答案，它是初步的，但它是一个开始，让您了解您需要解决的问题（主要是加载图像）。感谢您的回复。我得到一个承诺值的错误。它指出，“'Promise'未定义“[no unde]”，这似乎是这段阻止图像加载的新代码的主要问题。是否有解决此错误的方法？Promise应定义为全局对象。。。试试窗户，答应我？我真的不知道为什么这不起作用-它应该只是存在，因为它现在是一种普通的核心web技术，支持所有异步操作…你在用什么浏览器测试它？我在Chrome和FireFox中测试。什么是报告“无未定义”？因为承诺应该存在。下面是上面的文档：-只需在tour浏览器控制台中键入“Promise”，它应该就在那里。在Firefox调试控制台中，我得到：“XML解析错误：语法错误位置：第1行，第1列：”即使我有。
/**Array of Images**/
var imgArray = [
    "gameImages/titleScreen.png",
    "gameImages/titleScreen1.png",
    "gameImages/titleScreenBW.png",
    "gameImages/startScreen.png",
    "gameImages/startScreenBW.png",
    "gameImages/forestTrail.png",
    "gameImages/forestTrailBW.png",
    "gameImages/jewleryOnLog.png",
    "gameImages/jewleryOnLogBW.png",
    "gameImages/sunlitWaterFall.png",
    "gameImages/sunlitWaterFalBW.png",
    "gameImages/sunlitWaterFall.png",
    "gameImages/sunsetStarySky.png",
    "gameImages/sunsetStarySkyBW.pn",
    "gameImages/campSunset.png",
    "gameImages/campSunsetBW.png",
    "gameImages/LoveHeart.png",
    "gameImages/LoveHeartBW.png",
    "gameImages/nightSky2BW.png",
    "gameImages/nightSky2.png",
    "gameImages/nightSkyAnimate.gif"
];

function drawImageProp(ctx, image, x, y, w, h, offsetX, offsetY) {

//Function Code for resizing images to fit canvas proportions...

ctx.drawImage(image, cx, cy, cw, ch, x, y, w, h);

}


drawImageProp(ctx, image, 0, 0, width, height); //I want to change image to get the array image element

/**Right now, the image parameter on Adobe Dreamweaver displays the error "'image' is not defined. [no-undef]"
**/