html5 canvas tableau d'images - dessiner une image sur la toile

Je suis en utilisant le HTML5 canvas et JavaScript pour faire un jeu de base, et j'ai un tableau d'images pour les nombres de 1 à 10, puis un autre tableau pour les Gallois, les mots pour les nombres de 1 à 10.

Ce que je veux faire est de sélectionner un élément aléatoire à partir des images de tableau et un élément au hasard dans les mots de tableau et de les afficher à la fois sur la toile. L'utilisateur devra alors cliquer sur un cocher la case pour indiquer si le mot représente le bon numéro, ou une croix si elle ne le fait pas.

Le problème est que je ne suis pas sûr de la façon de dessiner un élément de tableau sur la toile. J'ai le code suivant, que j'allais l'utiliser juste pour tester que cela fonctionne, avant je pense que sur la façon de faire les éléments tirés être choisi au hasard:

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

mais pour une raison quelconque, lorsque j'affiche la page dans le navigateur, dans la console de firebug, j'obtiens l'erreur:

N'a pas pu convertir JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
contexte.drawImage(imageArray[0], 100, 30);

Je ne suis pas sûr si c'est ce que je suis censé pour accéder à l'image dans l'élément de tableau 0... quelqu'un pourrait s'il vous plaît signaler ce que je fais mal?

* EDIT *

J'ai changé le code ci-dessous la à la tableaux de à:

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

mais pour une raison quelconque, le seul élément du wordsArray est attirée sur la toile, l'image de l'élément de imageArray n'est pas affiché à tous.

Des idées?

la création d'un JSFiddle va nous aider
Désolé, je ne sais pas ce qu'est un JSFiddle est? Comment puis-je en créer un?
Désolé. Il est cool le site appelé JSFiddle. Vous pouvez y aller et faire une simple maquette de votre code, et puis vous pouvez partager avec nous, et nous pouvons résoudre votre problème plus facile.
J'ai essayé de faire un JSFiddle... mais je ne sais pas si ce que j'ai fait est juste... L'URL de la page que j'ai faite sur le site est: jsfiddle.net/someone2088/22XgR mais il ne semble pas être l'affichage de la page s'affiche correctement dans le panneau d'aperçu. Ou au moins, il ne semble pas être affichés de la même façon que lorsque j'affiche la page dans un navigateur. L'URL de ma page est: les utilisateurs.aber.ac.royaume-uni/eef8/iwp/cession/workingVersion10-05-2012/... Vous aurez à cliquer sur Démarrer d'abord, lorsqu'il met à jour, seule la croix a un écouteur d'événement

InformationsquelleAutor Someone2088 | 2012-05-09

1

Vous avez besoin pour créer une image en javascript avec ses src mis à votre tableau de valeur
```
        var img = new Image();
img.src = imageArray[0];
ctx.drawImage(img, 100, 30);
```
Sans faire que vous êtes en train de poser de la toile de dessiner une chaîne de "1.png", par exemple, qui n'est pas ce que vous cherchez ici!
- Merci pour votre réponse. J'ai fait ce que vous avez dit, mais pour une raison quelconque, seul le mot est attirée sur la toile, l'image n'est pas. J'ai mis à jour mon premier post pour montrer ce que j'ai fait.
- Je pense que la seule chose qui pourrait arrêter le image tirée de la voie. Où en êtes-vous des images par rapport à la racine du site? Dans firefox, firebug, vous devriez être en mesure de voir les demandes " 1.png' etc. Je pense à ceux qui sont affichées, comme 404?
- J'ai pensé 404 ont été 'page introuvable' erreurs? Ils ne sont pas d'une erreur 404, l'image n'est pas affichée. L'image est un .fichier png, et c'est dans le même répertoire racine de la page web que j'essaie de l'afficher sur. Il a quelque chose à voir avec le fait que je suis en train d'afficher l'image sur le HTML5 canvas, mais je ne peux pas savoir quel est le problème.
- 404 sont effectivement impossible de trouver la page, mais ils peuvent se produire à partir d'une requête HTTP, si la cible n'est pas là. En supposant que vos images sont là et la demande d'OBTENIR des rendements de 200 alors oui, la question sera dans le code, ce qui est " drawGameElements();' dans ton code?
InformationsquelleAutor dougajmcdonald
0

C'est le code pour 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);
}
```
Littéralement, tout ce qu'il fait c'est de dessiner un score de bar " sur la toile, qui est juste une ligne au-dessus, le niveau actuel/nombre total de niveaux, et le score actuel. Je ne pense pas que ce soit les questions, les éléments que cette fonction est destinée à l'affichage sont correctement affichés.
- Ok, de toute façon, il semble avoir commencé à travailler maintenant. Merci à tous pour votre aide
- En fait, il semble que le travail parfois... parfois, il faut un certain nombre de clics sur la toile avant de l'iamge apparaît, d'autres fois il n'apparaît pas à tous... il semble être complètement aléatoire si l'image s'affiche sur la première de la souris (clic sur le bouton)- comme il se doit, ou si elle apparaît sur un clic supplémentaire sur la toile, ou si elle n'apparaît pas à tous... je suis vraiment confus par ce. Toutes les suggestions?
- L'image n'est pas affichée, car il n'a pas encore été recueillie par le serveur(cela arrive aussi avec des polices spéciales). Chaque fois que vous tentez de charger une image, qui n'a pas été chargé avant, une demande est envoyée. Ce qui signifie que certaines images prennent un peu de temps avant de pouvoir être utilisé. Un moyen facile de contourner cela est de créer un setTimeout() à chaque fois que vous chargez une image, ou pour parcourir et de charger toutes les images au début, de sorte qu'ils seront là quand vous voulez les appeler.
InformationsquelleAutor Noble-Surfer
0

C'est un ancien, mais la raison pour laquelle l'image n'est pas visible est probablement parce que vous avez d'appeler onLoad puis définissez la src comme suit:
```
var img = new Image();
img.onLoad = function() {ctx.drawImage(img, 100, 30);};
img.src = imageArray[0];
```
InformationsquelleAutor WikiPlugs

Vous devez vous connecter pour publier un commentaire.