Définir l'endroit de démarrage d'un trait sur un canvas

Résolu
MrLemon Messages postés 78 Statut Membre -  
MrLemon Messages postés 78 Statut Membre -
Bonjour, je n'arrive pas à faire en sorte que mon trait commence sur la première image en haut à gauche et qu'il se termine sur la dernière image en bas à droite.
Voici mon script : 
<!doctype html>
<html>
<head>
  <title>Les Fresque du Climat par Erwan et Clara</title>
  <link rel="stylesheet" href="feuille de style.css" />
</head>

 <body>
  <h1> La Fresque du Climat par Erwan et Clara :)</h1>
  <p>Pour lancer la presentation de la fresque du climat, cliquer sur le lien ci-dessous :</p>
  <p><a href = "javascript:run_python()"><font face = 'Cooper'>    Fresque du climat</font></a></p>
  <p>Pour vous exercez, voici un petit jeu :</p>
  <canvas id="canvas" width="1550" height="1420" style = "border:5px solid #000000;"></canvas>
  <p> Notre lycee : <a href="http://porte-normandie-lyc.spip.ac-rouen.fr/" : target="_blank" > Lycee Porte de Normandie</a></p>
 
	<script language="Javascript">
    
	var canvas = document.getElementById("canvas") ;
	var ctx = canvas.getContext("2d");
    var img = new Image(); 
	img.src = "Fresque_05_bis.png";
	img.onload = function(){ 
		ctx.drawImage(img, 50, 1170);
   
	};
	var img2 = new Image(); 
	img2.src = "Fresque_07_bis.png";
	img2.onload = function(){ 
		ctx.drawImage(img2, 50, 590);
		
	};	
	 
	var img3 = new Image(); 
	img3.src = "Fresque_17_bis.png";
	img3.onload = function(){ 
		ctx.drawImage(img3, 50, 300);
		
	};	

    var img4 = new Image(); 
	img4.src = "Fresque_23_bis.png";
	img4.onload = function(){ 
		ctx.drawImage(img4, 50, 880);
		
	};	
	
	 var img5 = new Image(); 
	img5.src = "Fresque_25_bis.png";
	img5.onload = function(){ 
		ctx.drawImage(img5, 50, 10);
		
	};	
	
	
	 var img6 = new Image(); 
	img6.src = "Fresque_06_bis.png";
	img6.onload = function(){ 
		ctx.drawImage(img6, 1100, 880);
		
	};
	
	
	 var img7 = new Image(); 
	img7.src = "Fresque_08_bis.png";
	img7.onload = function(){ 
		ctx.drawImage(img7, 1100, 300);
		
	};
	
	
	 var img8 = new Image(); 
	img8.src = "Fresque_18_bis.png";
	img8.onload = function(){ 
		ctx.drawImage(img8, 1100, 590);
		
	};
	
	
	 var img9 = new Image(); 
	img9.src = "Fresque_26_bis.png";
	img9.onload = function(){ 
		ctx.drawImage(img9, 1100, 1170);
		
	};
	
	
	 var img10 = new Image(); 
	img10.src = "Fresque_24_bis.png";
	img10.onload = function(){ 
		ctx.drawImage(img10, 1100, 10);
		
	};
	

  function run_python()
   {
    var w = new ActiveXObject("WScript.Shell"); 
    w.run('cmd /c "python C:\\fresque\\Le_rechauffement_climatique.py"'); 
   }
	
  
	</script>
 
	<script type="text/javascript">
	window.onload = function() {
	var clicks = 0;
	var lastClick = [0, 0];

	var canvas = document.getElementById('canvas');

	canvas.addEventListener('click', draw, false);

	function verification(x1, y1, x2, y2){
		if ((((x1>60)&&(x1<460) ) && (y1>270)&&(y1<510)) && (((x2>1100)&&(x2<1500) ) && (y2>1512)&&(y2<1753))){
			console.log("ok");
			return true
		}
		else {
			return false
		}
	}
	
	
	function draw(e) {
		ctx = this.getContext('2d');

		x = getClick(e)[0]; // - this.offsetLeft;
		y = getClick(e)[1]; // - this.offsetTop;
		console.log(x,y);

		if (clicks != 1) {
			clicks++;
			console.log(clicks)
			lastClick = [x, y];
		} else {
			
			if (verification(lastClick[0], lastClick[1], x, y)) {
			
				ctx.strokeStyle = 'black';
				ctx.lineWidth=6;
				ctx.beginPath();
				ctx.moveTo(lastClick[0], lastClick[1]);
				ctx.lineTo(x, y);

				ctx.stroke()
		
				clicks = 0;
			} else {
				clicks = 0;
			}	
		
	}
	}
	function getClick(e) {
		var x, y;

		if (e.pageX != undefined && e.pageY != undefined) {
			x = e.pageX;
			y = e.pageY;
		} else {
			x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
		}

		return [x, y];
	}
	}
	</script>
	
 
 </body>
</html>


Merci à tous ceux qui répondront

1 réponse

  1.
    MrLemon Messages postés 78 Statut Membre
     
    Projet fini : 
    <!doctype html>
<html>
<head>
  <title>Les Fresque du Climat par Erwan et Clara</title>
  <link rel="stylesheet" href="feuille de style.css" />
</head>

 <body>
  <h1> La Fresque du Climat</h1>
  <p>Pour lancer la presentation de la fresque du climat, cliquer sur le lien ci-dessous :</p>
  <p><a href = "javascript:run_python()"><font face = 'Cooper'>    Fresque du climat</font></a></p>
  <p>Pour vous exercez, voici un petit jeu :</p>
  <canvas id="canvas" width="1550" height="1420" style = "border:5px solid #000000;"></canvas>
  <p><img src="Conclusion.png"/></p>
  <p> Notre lycee : <a href="http://porte-normandie-lyc.spip.ac-rouen.fr/" : target="_blank" > Lycee Porte de Normandie</a></p>
	<script language="Javascript">
    
	var canvas = document.getElementById("canvas") ; //fait réf. au canvas//
	var ctx = canvas.getContext("2d");               //dessine sur le canvas en 2d//
    var img = new Image();                           // création d'image //
	img.src = "Fresque_05_bis.png";
	img.onload = function(){ 
		ctx.drawImage(img, 50, 1170);
   
	};
	var img2 = new Image(); 
	img2.src = "Fresque_07_bis.png";
	img2.onload = function(){ 
		ctx.drawImage(img2, 50, 590);
		
	};	
	 
	var img3 = new Image(); 
	img3.src = "Fresque_17_bis.png";
	img3.onload = function(){ 
		ctx.drawImage(img3, 50, 300);
		
	};	

    var img4 = new Image(); 
	img4.src = "Fresque_23_bis.png";
	img4.onload = function(){ 
		ctx.drawImage(img4, 50, 880);
		
	};	
	
	 var img5 = new Image(); 
	img5.src = "Fresque_25_bis.png";
	img5.onload = function(){ 
		ctx.drawImage(img5, 50, 10);
		
	};	
	
	
	 var img6 = new Image(); 
	img6.src = "Fresque_06_bis.png";
	img6.onload = function(){ 
		ctx.drawImage(img6, 1100, 880);
		
	};
	
	
	 var img7 = new Image(); 
	img7.src = "Fresque_08_bis.png";
	img7.onload = function(){ 
		ctx.drawImage(img7, 1100, 300);
		
	};
	
	
	 var img8 = new Image(); 
	img8.src = "Fresque_18_bis.png";
	img8.onload = function(){ 
		ctx.drawImage(img8, 1100, 590);
		
	};
	
	
	 var img9 = new Image(); 
	img9.src = "Fresque_26_bis.png";
	img9.onload = function(){ 
		ctx.drawImage(img9, 1100, 1170);
		
	};
	
	
	 var img10 = new Image(); 
	img10.src = "Fresque_24_bis.png";
	img10.onload = function(){ 
		ctx.drawImage(img10, 1100, 10);
		
	};
	

  function run_python()
   {
    var w = new ActiveXObject("WScript.Shell"); 
    w.run('cmd /c "python C:\\fresque\\Le_rechauffement_climatique.py"'); 
   }
	
  
	</script>
 
	<script type="text/javascript">
	window.onload = function() {
	var clicks = 0;
	var lastClick = [0, 0];

	var canvas = document.getElementById('canvas');

	canvas.addEventListener('click', draw, false);

	function verification(x1, y1, x2, y2){
        if ((((x1>60)&&(x1<460) ) && (y1>311)&&(y1<551)) && (((x2>1100)&&(x2<1500) ) && (y2>1512)&&(y2<1753))){
            console.log("ok");
            return [true, 450, 120, 1100, 1260];
        }
        if ((((x1>60)&&(x1<460) ) && (y1>602)&&(y1<842)) && (((x2>1100)&&(x2<1500) ) && (y2>891)&&(y2<1132))){
				console.log("ok");
				return [true,450,420,1100,710];
		}
		if ((((x1>60)&&(x1<460) ) && (y1>892)&&(y1<1132)) && (((x2>1100)&&(x2<1500) ) && (y2>602)&&(y2<842))){
				console.log("ok");
				return [true,450,710,1100,420];
			
		}	
		if ((((x1>60)&&(x1<460) ) && (y1>1182)&&(y1<1422)) && (((x2>1100)&&(x2<1500) ) && (y2>312)&&(y2<552))){
				console.log("ok");
				return [true,450,1000,1100,130];
			
		}	
		if ((((x1>60)&&(x1<460) ) && (y1>1443)&&(y1<1681)) && (((x2>1100)&&(x2<1500) ) && (y2>1152)&&(y2<1393))){
				console.log("ok");
				return [true,450,1290,1100,1000];
							
		}
		
		
		
		else {
            return [false, 0, 0, 0, 0];
        }
    }
function draw(e) {
        ctx = this.getContext('2d');

        x = getClick(e)[0]; // - this.offsetLeft;
        y = getClick(e)[1]; // - this.offsetTop;
        console.log(x,y);

        if (clicks != 1) {
            clicks++;
            console.log(clicks)
            lastClick = [x, y];
        } else {
            console.log(lastClick[0], lastClick[1], x, y);
            verif= verification(lastClick[0], lastClick[1], x, y)
            if (verif[0]) {

                ctx.strokeStyle = 'black';
                ctx.lineWidth=6;
                ctx.beginPath();
                ctx.moveTo(verif[1], verif[2]);
                ctx.lineTo(verif[3], verif[4]);

                ctx.stroke()

                clicks = 0;
            } else {
                clicks = 0;
            }

    }
    }

	function draw(e) {
        ctx = this.getContext('2d');

        x = getClick(e)[0]; // - this.offsetLeft;
        y = getClick(e)[1]; // - this.offsetTop;
        console.log(x,y);

        if (clicks != 1) {
            clicks++;
            console.log(clicks)
            lastClick = [x, y];
        } else {
            console.log(lastClick[0], lastClick[1], x, y);
            verif= verification(lastClick[0], lastClick[1], x, y)
            if (verif[0]) {

                ctx.strokeStyle = 'black';
                ctx.lineWidth=6;
                ctx.beginPath();
                ctx.moveTo(verif[1], verif[2]);
                ctx.lineTo(verif[3], verif[4]);

                ctx.stroke()

                clicks = 0;
            } else {
                clicks = 0;
            }

    }
    }
	function getClick(e) {
		var x, y;

		if (e.pageX != undefined && e.pageY != undefined) {
			x = e.pageX;
			y = e.pageY;
		} else {
			x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
		}

		return [x, y];
	}
	}
	</script>
	

 </body>
</html>
    0

Discussions similaires

Bouton ON/OFF : O ou I, quel côté est allumé
Stargirlfr -
kaparzo23 -

12 réponses
Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses