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 -
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 :
Merci à tous ceux qui répondront
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
A voir également:
- Définir l'endroit de démarrage d'un trait sur un canvas
- Rebooter un pc au démarrage - Guide
- Forcer demarrage pc - Guide
- Ordinateur lent au démarrage - Guide
- Problème démarrage windows 10 - Guide
- Qu'est ce qui se lance au démarrage de l'ordinateur - Guide
1 réponse
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>
