Dessiner des lignes - fonction javascript en boucle

Résolu

super-S Messages postés 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020 - 30 mars 2017 à 16:23
@karamel Messages postés 1830 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 2 juin 2023 - 31 mars 2017 à 18:46

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

A voir également:

Dessin boucle
Boucle dessin - Meilleures réponses
Boucles javascript - Meilleures réponses
Lune dessin - Forum C# / .NET
Parfait boucle ✓ - Forum C / C++ / C++.NET
Arbre généalogique dessin - Forum PHP
Dessin souris - Forum C# / .NET
Dessin panneau ✓ - Forum Java

2 réponses

Réponse 1 / 2

@karamel Messages postés 1830 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 2 juin 2023 147
Modifié le 30 mars 2017 à 23:26

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 !

Réponse 2 / 2

super-S Messages postés 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020
31 mars 2017 à 10:27

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

@karamel Messages postés 1830 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 2 juin 2023 147
31 mars 2017 à 18:46

je met en resolu

Votre réponse