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

super-S 4 Messages postés jeudi 30 mars 2017Date d'inscription 6 avril 2017 Dernière intervention - 30 mars 2017 à 16:23 - Dernière réponse : @karamel 1652 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention
- 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
Afficher la suite 

3 réponses

Répondre au sujet
@karamel 1652 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - Modifié par @karamel le 30/03/2017 à 23:26
0
Utile
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 !
Commenter la réponse de @karamel
super-S 4 Messages postés jeudi 30 mars 2017Date d'inscription 6 avril 2017 Dernière intervention - 31 mars 2017 à 10:27
0
Utile
1
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 1652 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 14 décembre 2017 Dernière intervention - 31 mars 2017 à 18:46
je met en resolu
Commenter la réponse de super-S

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.