Bonjour à tous !

Voilà, je me suis mis au javascript hier, et suis en train de développer une application mélant JS et la balise <canvas> du html.

Jusque là, je n'ai pas trop de problème, j'avance lentement, mais surement.

Voici la base de mon code : (déclaration des variables et initialisation) :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
var canvas;
var ctx;
var imgMoon;
var imgIdent;
var angle;
var x, dx;
var y, dy;
var started;
 
function init () {
	//Mise en place du context
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
 
	//Initialisation des variables
	imgIdent = new Image();
	imgIdent.src='style/ident.png';
	imgMoon = new Image();
	imgMoon.src='style/moon.png';
	angle = 0;
	x = 0;
	y = 0;
	dx = 2;
	dy = 2;
	started = false;
 
 
	//Preload des images
	if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "style/moon.png";
      image_url[1] = "style/ident.png";
 
       var i = 0;
       for(i=0; i<=3; i++) 
         preload_image_object.src = image_url[i];
    }
  // Mise en place de l'eventListener sur MouseMove
  canvas.addEventListener('mousemove', ev_mousemove, false);
}


J'en suis actuellement à essayer de gérer le déplacement d'une image dans le Canvas. Pour ce faire, j'utilise la fonction suivante :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
function draw(img){
	ctx.clearRect(0, 0, 300, 300);
	ctx.drawImage(img, x, y);
	x += dx;
	y += dy;
}
Je l'appelle ensuite en utilisant l'instruction
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
init();
setInterval(draw(imgMoon), 10);
Et là... Ca ne fonctionne pas. Rien ne s'affiche. Le script arrive jusqu'au bout (j'utilise un alert() à la fin du code, celui-ci s'affiche correctement), mais rien. Le Canvas reste désespérément vide.

J'ai bidouillé un peu, et en utilisant
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 
function draw(){
	ctx.clearRect(0, 0, 300, 300);
	ctx.drawImage(imgMoon, x, y);
	x += dx;
	y += dy;
}
init();
setInterval(draw, 10);

C'est à dire en utilisant la variable globale directement dans la fonction, sans passer par un parametre, cela fonctionne. (Affichage et déplacement de l'image...) Or j'aimerai pouvoir afficher l'image entrer en parametre...

Quelqu'un a une idée d'où peut venir le problème ?

Merci !


Edit : je développe en utilisant le navigateur Chromium et Notepad++, mais je ne pense pas que ça change grand chose dans ce cas là...

Edit 2 :

Je me rends compte que je charge 2 fois les images, mais j'ai la désagréable sensation que je ne préload rien du tout...