Problème MouseMove sur toile

Je tente d'obtenir une forme carrée pour suivre ma souris sur la toile en utilisant "mousemove".

function start(){ var canvastmp = document.getElementById("myCanvas") var canvas = canvastmp.getContext("2d"); window.addEventListener('mousemove', trevor, false); } function trevor(pos){ canvas.clearRect(0,0,600,400); var x = pos.clientX; var y = pos.clientY; canvas.fillRect(x-25,y-25,100,100); } window.addEventListener('load',start,false); 

Quand je l'exécute, rien ne s'affiche. Je l'ai peaufiné et je l'ai parcouru pendant un certain temps maintenant, et je ne peux pas sembler comprendre ce qui ne va pas. Encore une fois, je suis désolé pour la question totalement nooby! Toute une aide est très appréciée.

De plus, j'utilise Chrome, si cela aide.

Le problème est que la canvas est hors de portée. Pour le retrouver dans la portée, intégrer la fonction trevor à l'intérieur de la fonction de start ou transmettre le contexte de la toile comme variable à une fermeture:

 function start(){ var canvastmp = document.getElementById("myCanvas") var ctx = canvastmp.getContext("2d"); window.addEventListener('mousemove', function(pos){trevor(ctx,pos)}, false); } function trevor(ctx, pos){ ctx.clearRect(0,0,600,400); var x = pos.clientX; var y = pos.clientY; ctx.fillRect(x-25,y-25,100,100); } window.addEventListener('load',start,false); 

Ou bien, utilisez une approche plus axée sur l'objet:

 function trevor(ctx) { function moveHandler(pos) { ctx.clearRect(0,0,600,400); ctx.fillRect(pos.clientX - 25, pos.clientY - 25, 100, 100); } } var myTrevor = trevor((document.getElementById('myCanvas')).getContext('2d')); window.addEventListener('load', myTrevor.moveHandler, false); 

La bonne chose à ce sujet est que les contextes sont toujours pertinents; Trevor ne connaît que le contexte donné et le code qui configure le gestionnaire d'événements récupère également le contexte.

Votre variable de canvas est définie dans le start la fonction, mais lorsque vous vous référez à la fonction trevor elle est hors de portée.

Définissez-le sur les deux fonctions de sorte qu'il soit possible pour les deux et cela fonctionne.

Voir – http://jsfiddle.net/sync/mE4B4/

 var canvas; function start() { var canvastmp = document.getElementById("myCanvas"); canvas = canvastmp.getContext("2d"); window.addEventListener('mousemove', trevor, false); } function trevor(pos) { canvas.clearRect(0, 0, 600, 400); var x = pos.clientX; var y = pos.clientY; canvas.fillRect(x - 25, y - 25, 100, 100); } window.addEventListener('load', start, false);​ 

Vous mentionnez que vous utilisez Chrome – si c'est le cas, regardez l'inspecteur intégré (Tools> Developer Tools). L'onglet Console affiche les erreurs. Si vous regardez là-bas, vous verrez quelque chose comme Canvas not defined , ce qui constitue un indice utile.

Le 'canvas' var était hors de portée. Ce qui suit fonctionnera:

 function mousemove(pos) { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.clearRect(0,0,600,400); var x = pos.clientX; var y = pos.clientY; ctx.fillStyle="#FF0000"; ctx.fillRect(x-25,y-25,50,50); } window.addEventListener('mousemove', mousemove, false); 

LIVE DEMO ICI