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
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
- 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:

2 réponses

@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
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 !
0
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
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
31 mars 2017 à 18:46
je met en resolu
0