Javascript html5画布图像数组-将图像绘制到画布

我正在使用HTML5画布和JavaScript制作一个基本游戏，我有一个数字1-10的图像数组，然后还有一个数字1-10的威尔士单词数组

我要做的是从images数组中选择一个随机元素，从words数组中选择一个随机元素，并在画布上显示它们。然后，用户将单击一个勾号以指示该单词是否代表正确的数字，如果不正确，则单击一个十字

问题是我不确定如何在画布上绘制数组元素。在我考虑如何随机选择绘制的元素之前，我将使用以下代码来测试它是否有效：

function drawLevelOneElements(){
            /*First, clear the canvas */
            context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
            /*This line clears all of the elements that were previously drawn on the canvas. */
            /*Then redraw the game elements */
            drawGameElements();
            /*Now draw the elements needed for level 1 (08/05/2012) */
            /*First, load the images 1-10 into an array */
            var imageArray = new Array();
            imageArray[0] = "1.png";
            imageArray[1] = "2.png";
            imageArray[2] = "3.png";
            imageArray[3] = "4.png";
            imageArray[4] = "5.png";
            imageArray[5] = "6.png";
            imageArray[6] = "7.png";
            imageArray[7] = "8.png";
            imageArray[8] = "9.png";
            imageArray[9] = "10.png";

            /*Then create an array of words for numbers 1-10 */
            var wordsArray = new Array();
            wordsArray[0] = "Un";
            wordsArray[1] = "Dau";
            wordsArray[2] = "Tri";
            wordsArray[3] = "Pedwar";
            wordsArray[4] = "Pump";
            wordsArray[5] = "Chwech";
            wordsArray[6] = "Saith";
            wordsArray[7] = "Wyth";
            wordsArray[8] = "Naw";
            wordsArray[9] = "Deg";

            /*Draw an image and a word to the canvas just to test that they're being drawn */
            context.drawImage(imageArray[0], 100, 30);
            context.strokeText(wordsArray[3], 500, 60);
        }

但出于某种原因，当我在firebug控制台的浏览器中查看页面时，我得到了错误：

无法转换JavaScript参数arg 0[nsIDOMCanvasRenderingContext2D.drawImage] drawImage（imageArray[0]，100，30）

我不确定这是否意味着我要访问数组元素0中的图像。。。有人能指出我做错了什么吗

*编辑*

我已将下面的代码更改为数组：

var image1 = new Image();
            image1.src = imageArray[0];

            /*Draw an image and a word to the canvas just to test that they're being drawn */
            context.drawImage(image1, 100, 30);
            context.strokeText(wordsArray[3], 500, 60);

但是由于某种原因，wordsArray中唯一的元素被绘制到画布上——imageArray中的image元素根本不显示

---

有什么想法吗？

您需要创建一个javascript图像，并将其src设置为数组值

        var img = new Image();
        img.src = imageArray[0];

        ctx.drawImage(img, 100, 30);

---

如果不这样做，您将试图要求画布绘制一个字符串“1.png”，例如，这不是您在这里想要的

您需要创建一个javascript图像，并将其src设置为数组值

        var img = new Image();
        img.src = imageArray[0];

        ctx.drawImage(img, 100, 30);

---

如果不这样做，您将试图要求画布绘制一个字符串“1.png”，例如，这不是您在这里想要的

这是drawGameElements（）的代码

---

从字面上说，它所做的只是在画布上画一个“得分栏”，它只是一条横穿顶部的线，当前级别/总级别，以及用户的当前分数。我认为这不是问题所在，因为此函数要显示的元素正在正确显示。

这是drawGameElements（）的代码

---

从字面上说，它所做的只是在画布上画一个“得分栏”，它只是一条横穿顶部的线，当前级别/总级别，以及用户的当前分数。我不认为这是问题所在，因为此函数要显示的元素正在正确显示。

这是一个旧的元素，但图像未显示的原因可能是您必须调用onLoad，然后将src设置为：

var img = new Image();
img.onLoad = function() {ctx.drawImage(img, 100, 30);};
img.src = imageArray[0];

---

这是一个旧版本，但图像未显示的原因可能是您必须调用onLoad，然后将src设置为：

var img = new Image();
img.onLoad = function() {ctx.drawImage(img, 100, 30);};
img.src = imageArray[0];

---

我通过递归调用img.onload方法来绘制图像，解决了这个问题。 例如：

---

我通过递归调用img.onload方法来绘制图像，解决了这个问题。 例如：

---

创建一个JSFIDLE将有助于usSorry，我不知道JSFIDLE是什么？如何创建一个？抱歉。有一个很酷的网站叫JSFIDLE。你可以去那里做一个简单的代码模型，然后和我们分享，我们可以更容易地解决你的问题。。。但我不知道我所做的是否正确。。。我在该网站上创建的页面的URL为：但它似乎没有在预览面板中正确显示页面。或者至少它的显示方式与我在浏览器中查看页面时的显示方式不同。我的live页面的URL是：您必须先单击开始，当它更新时，只有cross有一个事件监听器创建一个JSFIDLE将有助于usSorry，我不知道JSFIDLE是什么？如何创建一个？抱歉。有一个很酷的网站叫JSFIDLE。你可以去那里做一个简单的代码模型，然后和我们分享，我们可以更容易地解决你的问题。。。但我不知道我所做的是否正确。。。我在该网站上创建的页面的URL为：但它似乎没有在预览面板中正确显示页面。或者至少它的显示方式与我在浏览器中查看页面时的显示方式不同。我的live页面的URL是：你必须先单击开始，当它更新时，只有十字架有一个事件监听器谢谢你的回复。我已经照你说的做了，但是出于某种原因，只有文字被画到画布上，而图像不是。我已经更新了我的原始帖子来展示我所做的。我认为唯一能阻止绘制图像的是路径。与网站根目录相关的图像位于何处？在firefox中，在firebug中，您应该能够看到对“1.png”等的GET请求。我希望这些请求显示为404？我以为404是“页面未找到”错误？它们不是404，只是没有显示图像。该图像是一个.png文件，它与我试图显示它的网页位于同一根目录中。这与我试图在HTML5画布上显示图像这一事实有关，但我无法确定问题出在哪里。404实际上是找不到页面的，但如果目标不在那里，它们可以在任何HTTP请求中出现。假设您的图像在那里，GET请求返回200，那么问题将出现在代码中，什么是“drawGameElements（）；”你在代码中做什么？谢谢你的回复。我已经照你说的做了，但是出于某种原因，只有文字被画到画布上，而图像不是。我已经更新了我的原始帖子来展示我所做的。我认为唯一能阻止绘制图像的是路径。与网站根目录相关的图像位于何处？在firefox中，在firebug中，您应该能够看到对“1.png”等的GET请求。我希望这些请求显示为404？我以为404是“页面未找到”错误？它们不是404，只是没有显示图像。该图像是一个.png文件

    function callDraw(context, imgs, cx, cy, ri, space){
     if(ri == imgs.length) 
      return;
     context.drawImage(imgs[ri], cx, cy);
     cy += imgs[ri].height + space;
     ri++;
     callDraw(context, imgs, cx, cy, ri, space);
    }