Gestion des événements en javascript

[Fermé]
Signaler
Messages postés
1
Date d'inscription
vendredi 10 décembre 2010
Statut
Membre
Dernière intervention
12 décembre 2010
-
Bonjour,

Je suis actuellement en train d'apprendre le javascript et je fais un exercice dans lequel je ne comprend pas comment se passe la gestion événementielle dans le canvas. Il s'agit de faire en sorte qu'au passage de la souris sur le cercle , ce dernier doit s'agrandir ainsi que tous les traits qui sont connectés au cercle . Le problème est que lorsque la souris rentre dans le canvas par n'importe quel direction, les traits connectés au cercle se modifient instantanément, alors que dans le code j'ai mis cette modification dans un test. Je n'ai traité pour l'instant que le cercle qui se trouve en haut à gauche.

Voici mon code :

<!doctype html>

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery-ui-1.6rc2.js"></script>

<script language="javascript">
var canvasMinX;
var canvasMaxX;
var canvasMinY;
var canvasMaxY;
var canvas;
var ctx;

function main(){

initialize();
}

function initialize(){

init_mouse();
canvas=document.getElementById("canvas");
ctx=canvas.getContext("2d");

ctx.fillStyle="rgb(0,105,151)";

ctx.beginPath();

ctx.moveTo(60,65);
ctx.arc(50,65,10,0,Math.PI*2,true);

ctx.moveTo(260,65);
ctx.arc(250,65,10,0,Math.PI*2,true);

ctx.moveTo(60,240);
ctx.arc(50,240,10,0,Math.PI*2,true);

ctx.moveTo(260,240);
ctx.arc(250,240,10,0,Math.PI*2,true);

ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.strokeStyle="red";

ctx.moveTo(60,65);
ctx.lineTo(240,65);

ctx.moveTo(250,75);
ctx.lineTo(250,230);

ctx.moveTo(243,233);
ctx.lineTo(57,72);

ctx.moveTo(243,72);
ctx.lineTo(57,233);

ctx.stroke();
ctx.closePath();
}

function init_mouse(){
canvas=document.getElementById("canvas");
canvasMinX = canvas.offsetLeft;
canvasMaxX = canvasMinX + 300;
}

function onMouseMove(evt){
if( (Math.pow(50-evt.pageX,2)+Math.pow(65-evt.pageY,2) <= 100) && (evt.pageX > canvasMinX && evt.pageX < canvasMaxX)){
ctx.beginPath();
ctx.clearRect(40,55,40,40);
ctx.moveTo(60,65);
ctx.arc(50,65,20,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(240,65);
ctx.lineTo(70,65);
ctx.moveTo(243,233);
ctx.lineTo(64,79);
ctx.stroke();
ctx.closePath();

}else if((Math.pow(50-evt.pageX,2)+Math.pow(65-evt.pageY,2) > 100 && (evt.pageX > canvasMinX && evt.pageX < canvasMaxX))){
ctx.beginPath();
ctx.clearRect(20,20,50,65);
ctx.moveTo(60,65);
ctx.arc(50,65,10,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(60,65);
ctx.lineTo(240,65);
ctx.moveTo(243,233);
ctx.lineTo(57,72);
ctx.stroke();
ctx.closePath();

}
}

$(document).mousemove(onMouseMove);

</script>

</head>
<body onload="main()">
<canvas id="canvas" width="300" height="300" style="border: 1px dotted; float: left;"></canvas>
</body>
</html>


Merci pour vos réponses.