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 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 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 js - Meilleures réponses
Boucle for javascript - Meilleures réponses
Boucle for vba ✓ - Forum Visual Basic 6
Html texte défilant en boucle - Forum Javascript / DHTML
Vitesse dessin - Forum Java
Diaporama pdf en boucle - Forum Javascript / DHTML
Automatiser en boucle l'affichage d'un défilement auto pour .pdf sous A Reader - Forum VB.NET

2 réponses

Réponse 1 / 2

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
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 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
31 mars 2017 à 18:46

je met en resolu

Discussions similaires

Dessiner un croissant de lune

Dessin vectoriel (dur dur ???)

Boucle définir si c'est un carré parfait

texte qui defile en boucle sans espace entre le debut et la fin

Formule pour hexagone régulier

Votre réponse

Discussions similaires