Bonjour !

Alors voilà, je souhaite récupérer les coordonnées de la souris par une fonction. J'ai celle là qui fonctionne bien mais je n'arrive pas à récupérer les coordonnées en dehors de cette même fonction. Le "console.log(mouse.x);" par exemple m'affiche 0 (coordonnée de base de mouse.x). Comment m'y prendre pour pouvoir accéder à ces valeurs en dehors de la fonction ?

Merci à l'avance pour votre aide.

	var canvas = document.getElementById("mon_canvas");
	canvas.width = 5000; 
	canvas.height = 1000; 
	var c = document.getElementById( "mon_canvas" );
	var ctx = c.getContext("2d");


	
	var mouse = {x: 0, y: 0};
	
	ctx.canvas.onmousemove = 
  	function(evt) {
   	mouse.x = evt.clientX;
    	mouse.y = evt.clientY;
  	};

console.log(mouse.x);

Bonjour,

Ton script est bien fonctionnel, la valeur de mouse.x est bien changé mais le console.log(mouse.x) n'est interprété qu'une seule fois au chargement de la page donc au moment d'interpréter ce console.log, la valeur de mouse.x est bien à 0.

Pour visualiser la nouvelle valeur régulièrement tu peux faire 

 setInterval(function(){ 
	console.log(mouse.x);
  }, 500);

Ce n'est pas une bonne chose de le faire avec un setInterval, l'idée c'est que lors d'un event, tu dis explicitement "Quand il se passe ça, je veux que tu m'affiches ça"

Bonjour Eromus,

Merci de ton aide, en effet en faisant le setInterval je me suis rendu compte du changement de mouse.x. Cependant, lorsque je souhaite utiliser cette même valeur, par exemple ici, pour dessiner une boule de coordonnées (mouse.x, mouse.y) cela ne fonctionne pas. La boule reste en (0,0).

	var canvas = document.getElementById("mon_canvas");
	canvas.width = 5000; 
	canvas.height = 1000; 
	var timeStep= 500;
	var c = document.getElementById( "mon_canvas" );
	var ctx = c.getContext("2d");



	function boule(x, y, radius, color){

		this.x=x;
		this.y=y;
		this.radius=radius;
		this.color=color;

		this.draw= function(){
		ctx.beginPath();
		ctx.arc(x, y, radius, 0, Math.PI*2, true);
		ctx.closePath();
		ctx.fillStyle = color;
		ctx.fill();
		return {x, y, radius, color};
		}

	}
	var mouse = {x: 0, y: 0};
	
	ctx.canvas.onmousemove = 
  	function(evt) {
   	mouse.x = evt.clientX;
    	mouse.y = evt.clientY;
  	};

    var joueur= new boule(mouse.x,mouse.y,20,"black");
    joueur.draw();

C'est la même problématique, il n'y a pas d'event qui appel boule().  

Donc en faisant ça tu appels une fois boule au chargement de la page. Il faut que tu places les deux dernières lignes dans le onmousemove comme ceci : 

var canvas = document.getElementById("mon_canvas");
canvas.width = 5000;
canvas.height = 1000;
var timeStep= 500;
var c = document.getElementById( "mon_canvas" );
var ctx = c.getContext("2d");
 
 
 
function boule(x, y, radius, color){
 
    this.x=x;
    this.y=y;
    this.radius=radius;
    this.color=color;
 
    this.draw= function(){
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
    return {x, y, radius, color};
    }
 
}
var mouse = {x: 0, y: 0};
 
ctx.canvas.onmousemove =
function(evt) {
mouse.x = evt.clientX;
    mouse.y = evt.clientY;
var joueur= new boule(mouse.x,mouse.y,20,"black");

joueur.draw();
};