html5-canvas-array von Bilder - zeichnen Sie Bild auf Leinwand

Ich bin mit dem HTML5-canvas und JavaScript zu machen ein Spiel, und ich habe ein array von Bildern für die zahlen 1-10, und müssen dann noch ein array für den walisischen Worten für die zahlen 1-10.

Was ich tun möchte, ist wählen Sie ein element zufällig aus dem Bilder-array und ein zufälliges element aus dem Wort-array und zeigen Sie Sie beide auf die Leinwand. Der Benutzer klickt dann auf ein Häkchen, um anzuzeigen, wenn das Wort, stellt die richtige Zahl, oder ein Kreuz, wenn nicht.

Das problem ist, dass ich nicht sicher bin, wie das zeichnen eines array-Elements auf die Leinwand. Ich habe den folgenden code, welchen ich im Begriff war, zu verwenden, nur um zu testen, ob es funktioniert, bevor ich darüber nachdenken, wie die Elemente gezeichnet werden nach dem Zufallsprinzip ausgewählt:

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);
        }

aber aus irgendeinem Grund, wenn ich die Seite im browser, in der firebug-Konsole, erhalte ich die Fehlermeldung:

Konnte nicht konvertiert JavaScript-argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
Kontext.drawImage(imageArray[0], 100, 30);

Ich bin mir nicht sicher, ob dies ist, wie ich bin gedacht, um den Zugriff auf das Bild im array-element 0... könnte mir bitte jemand zeigen was ich falsch mache?

* EDIT *

Hab ich änderte den code unter der arrays:

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);

aber aus irgendeinem Grund, die nur das element aus der wordsArray gezeichnet auf die Leinwand - das Bild-element aus imageArray nicht angezeigt.

Irgendwelche Ideen?

InformationsquelleAutor Someone2088 | 2012-05-09