html5 canvas array of images-draw image to canvas

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, я получаю ошибку:

Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage] context.drawImage(imageArray[0], 100, 30);

я не уверен, если это то, как я имел в виду доступ к изображению в массиве элемента 0 ... может кто-то пожалуйста, укажите что я делаю неправильно?

* EDIT *

Я изменил код ниже для массивов:

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 обращается к Canvas- элемент изображения из imageArray вообще не отображается.

Любые идеи?

Answer 1

Вы должны создать яваскрипт изображение с его ЦСИ установлен в вашего значение массива

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

     ctx.drawImage(img, 100, 30); 

Без этого вы пытаетесь спросить холст, чтобы нарисовать строку «1.png», например, который не то, что вы здесь здесь!

Answer 2

Это код drawGameElements()

/* This function draws the game elements */ 
     function drawGameElements(){ 

      /* Draw a line for the 'score bar'. */ 
      context.moveTo(0, 25); 
      context.lineTo(700, 25); 
      context.stroke(); 

      /* Draw current level/ total levels on the left, and current score on the right. */ 
      context.font = "11pt Calibri"; /* Text font & size */ 
      context.strokeStyle = "black"; /* Font colour */ 
      context.strokeText(currentLevel + "/" + totalLevels, 10, 15); 
      context.strokeText(currentScore, 650, 15); 
     } 

Буквально, все это делает рисует «оценка бара» на холсте, который просто линия в верхней, текущий уровень/общий уровень , и текущий счет пользователя. Я не думаю, что это проблемы, поскольку элементы, которые эта функция предназначена для отображения, отображаются правильно.

Answer 3

Это старый, но причина, почему изображение не отображается, вероятно, потому, что вы должны вызвать OnLoad затем установите ЦСИ следующим образом:

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