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

Question

[我正在使用HTML5画布和JavaScript制作基本游戏，并且我为数字1-10设置了一个图像数组，然后为数字1-10的威尔士单词设置了另一个数组。

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

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

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]context.drawImage（imageArray [0]，100，30）;

我不确定这是否是我要访问数组元素0中的图像的方法……有人可以指出我做错了什么吗？

*编辑*

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

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中的图像元素根本不显示。

有什么想法吗？

我正在使用HTML5画布和JavaScript制作基本游戏，并且我为数字1-10制作了一个图像数组，然后为数字1-10制作了威尔士语单词的另一个数组。我想要的是...

Answer 1

您需要创建一个src设置为数组值的javascript图像

Answer 2

这是drawGameElements（）的代码

Answer 3

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

Answer 4

我通过对img.onload方法进行递归调用来绘制图像来解决此问题。例如：