Affichage dans un canvas fichier json

**bouboule22** · 21/05/2018, 19h28

Bonjour,
Je n'arrive pas à intégrer mes images sur mon plateau de jeu, les images se placent en dehors.J'ai besoin de vos lumières !!
voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	$.ajax({
	url:"item.json",
	type:"GET",
	success:function(data){
 
		console.log(data.images);
 
		$.each(data.images, function (i, j) {	
 
    $("#canvas").append("<img src=" + j.url+ " / >");
 
});
	 },
 
   	error:function(jqXHR,textStatus,errorThrown){
		alert(textStatus + errorThrown); 
	}
 
 
 });
	});

---------------------------
fichier json :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{ 
 "images": [
 { 
 "id": "weapon1", 
 "url": "img/weapon1.png" 
 }, 
 { 
 "id": "weapon2", 
 "url": "img/weapon2.png"
 
 }, 
 { 
 "id": "weapon3", 
 "url": "img/weapon3.png"
 }, 
 { 
 "id": "weapon4", 
 "url": "img/weapon4.png"
 
 }
 ]
	 }

---------------------------------------
html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <div id="canvas"></div>

---------------------------------------

D'autre part, il faudrait que chaque image du fichier json se placent aléatoirement sur le plateau.. si je place une variable random du type var rand = data.images[Math.floor(Math.random() * 20)]; où dois je placer ce rand dans $("#canvas").append("<img src=" + j.url+ " / >");Merci pour votre aide,