Dessiner des lignes - fonction javascript en boucle [Résolu]

Signaler
Messages postés
11
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
18 mai 2020
-
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
-
Bonjour,
Je ne suis pas très fort en javascript et je cherche à faire quelquechose de relativement simple mais je bloque. Merci d'avance.

L'idée est de dessiner des lignes aléatoirement sur un canvas, jusqu'à ce qu'il soit entièrement rempli.
J'arrive à positionner une ligne (avec une variable). Elle ne se pose jamais au même endroit quand on recharge la page. Mais quand j'utilise window.setInterval , il reprends toujours les mêmes valeurs et positionne la ligne toujours au même endroit.
Je pense que je pourrais utiliser une boucle while ou une boucle for (à priori plutôt while) pour lui dire de rejouer la même fonction par exemple 1000 fois, mais c'est là que je bloque - 1 semaine à écumer les diverses forums je comprends pas :-) J'espère que je suis assez clair.
Pour voir le résultat : http://www.supersly.org/QR-Code/test-dessiner-des-lignes-3.html



<head>
<script type="text/javascript">


function ligne1()
{

var canvas = document.getElementById('mon_canvas');
if(!canvas)
{
alert("Impossible de récupérer le canvas");
return;
}

var context = canvas.getContext('2d');
if(!context)
{
alert("Impossible de récupérer le context du canvas");
return;
}


context.beginPath();//On démarre un nouveau tracé
context.lineWidth=0.5;
context.moveTo(z1, 0);//On se déplace au coin inférieur gauche (gauche, haut)
context.lineTo(0, w1);
context.stroke();//On trace seulement les lignes.
context.closePath();


}

var z1=Math.floor(Math.random()*300);
var w1=Math.floor(Math.random()*300);


window.setTimeout("ligne1();", 3000, "JavaScript"); // 3000 est le temps y EN MILISECONDE


</script>
</head>

<body>
<canvas id="mon_canvas"></canvas>
</body>




Encore merci d'avance
Si quelqu'un a une idée cela peut me sauver

2 réponses

Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
128
bonjour

dans ton cas tu doit utiliser setIntreval

<!DOCTYPE html>
 <html>
     <head>
<script type="text/javascript">


function ligne1()
{

 var z1=Math.floor(Math.random()*300);
 var w1=Math.floor(Math.random()*300);

    var canvas = document.getElementById('mon_canvas');
        if(!canvas)
        {
            alert("Impossible de récupérer le canvas");
            return;
        }

    var context = canvas.getContext('2d');
        if(!context)
        {
            alert("Impossible de récupérer le context du canvas");
            return;
        } 
  

context.beginPath();//On démarre un nouveau tracé
context.lineWidth=0.5; 
context.moveTo(z1, 0);//On se déplace au coin inférieur gauche (gauche, haut)
context.lineTo(0, w1);
context.stroke();//On trace seulement les lignes.
context.closePath();

}

setInterval(ligne1, 500, "JavaScript"); // 3000 est le temps y EN MILISECOND

</script>
</head>

<body>
<canvas id="mon_canvas"></canvas> 
</body>

 </html>


quand a l'utilisation de setTimeout il doit ce trouvé dans la fonction et a ce moment il faut lancer la fonction au chargement de la page.

setTimeout est lancé une seul fois. jusqu’à sont rappel

<!DOCTYPE html>
 <html>
     <head>
<script type="text/javascript">


function ligne1()
{

 var z1=Math.floor(Math.random()*300);
 var w1=Math.floor(Math.random()*300);

    var canvas = document.getElementById('mon_canvas');
        if(!canvas)
        {
            alert("Impossible de récupérer le canvas");
            return;
        }

    var context = canvas.getContext('2d');
        if(!context)
        {
            alert("Impossible de récupérer le context du canvas");
            return;
        } 
  

context.beginPath();//On démarre un nouveau tracé
context.lineWidth=0.5; 
context.moveTo(z1, 0);//On se déplace au coin inférieur gauche (gauche, haut)
context.lineTo(0, w1);
context.stroke();//On trace seulement les lignes.
context.closePath();


setTimeout(ligne1, 500, "JavaScript"); // 3000 est le temps y EN MILISECOND

}

addEventListener('load', ligne1, false);

</script>
</head>

<body>
<canvas id="mon_canvas"></canvas> 
</body>

 </html>


rien ne sert de courir il faut partir a point.
cours Forest cours !
Messages postés
11
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
18 mai 2020

Alors là, je suis scié !

Merci beaucoup.
J'avais essayé setIterval, mais ça ne marchait pas. Je pense parce que mes variable (var z1 et w1) était en dehors de la fonction.

Encore merci
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
128
je met en resolu