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

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

Newsletters