Dessiner un trait lorsque l'on clique sur une image Résolu/Fermé

Question

Bonjour, j'aimerais pouvoir finaliser un projet de fin d'année et pour cela il faut que je finisse un mini jeu. Ce mini jeu consiste à relier deux images entre elles si elles correspondent. 

Le point que je n'arrive pas c'est qu'il faut que je récupère le clic gauche de ma souris et que lorsque les 2 clics correspondent au zone que j'ai prédéfini, un trait se dessine entre les 2 zones (qui sont les images)
Merci d'avance à ceux qui répondront !
Voici mon code : <script language="Javascript">
    var canvas = document.getElementById("canvas") ;
	var ctx = canvas.getContext("2d");
    var img = new Image(); 
	img.src = "C:/fresque/Fresque_05_bis.png";
	img.onload = function(){ 
		ctx.drawImage(img, 50, 1170);
   
	};
	var img2 = new Image(); 
	img2.src = "C:/fresque/Fresque_07_bis.png";
	img2.onload = function(){ 
		ctx.drawImage(img2, 50, 590);
		
	};	
	 
	var img3 = new Image(); 
	img3.src = "C:/fresque/Fresque_17_bis.png";
	img3.onload = function(){ 
		ctx.drawImage(img3, 50, 300);
		
	};

var img4 = new Image(); 
	img4.src = "C:/fresque/Fresque_23_bis.png";
	img4.onload = function(){ 
		ctx.drawImage(img4, 50, 880);
		
	};	
	
	 var img5 = new Image(); 
	img5.src = "C:/fresque/Fresque_25_bis.png";
	img5.onload = function(){ 
		ctx.drawImage(img5, 50, 10);
		
	};

var img6 = new Image(); 
	img6.src = "C:/fresque/Fresque_06_bis.png";
	img6.onload = function(){ 
		ctx.drawImage(img6, 1100, 880);
		
	};

var img7 = new Image(); 
	img7.src = "C:/fresque/Fresque_08_bis.png";
	img7.onload = function(){ 
		ctx.drawImage(img7, 1100, 300);
		
	};

var img8 = new Image(); 
	img8.src = "C:/fresque/Fresque_18_bis.png";
	img8.onload = function(){ 
		ctx.drawImage(img8, 1100, 590);
		
	};

var img9 = new Image(); 
	img9.src = "C:/fresque/Fresque_26_bis.png";
	img9.onload = function(){ 
		ctx.drawImage(img9, 1100, 1170);
		
	};

var img10 = new Image(); 
	img10.src = "C:/fresque/Fresque_24_bis.png";
	img10.onload = function(){ 
		ctx.drawImage(img10, 1100, 10);
		
	};

jordane45 · Answer

Bonjour,

Pas testé.. mais ceci devrait répondre en grande partie à ta question
https://gist.github.com/dflima/3907737

window.onload = function() {
	var clicks = 0;
	var lastClick = [0, 0];

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

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

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

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

if (clicks != 1) {
			clicks++;
		} else {
			ctx.beginPath();
			ctx.moveTo(lastClick[0], lastClick[1]);
			ctx.lineTo(x, y, 6);

ctx.strokeStyle = '#000000';
			ctx.stroke()

clicks = 0;
		}
		lastClick = [x, y];
	}

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];
	}
	}

MrLemon · Answer

Le projet final : Les Fresque du Climat par Erwan et Clara

La Fresque du Climat

Pour lancer la presentation de la fresque du climat, cliquer sur le lien ci-dessous :

Fresque du climat

Pour vous exercez, voici un petit jeu :

Notre lycee : Lycee Porte de Normandie

Dessiner un trait lorsque l'on clique sur une image

2 réponses

Discussions similaires