Triangles en javascript

Soyez le premier à donner votre avis sur cette source.

Snippet vu 8 430 fois - Téléchargée 27 fois

Commenter

Contenu du snippet

Tout est dans le titre. Cela permet de dessiner des triangles. C'est asez rapide pour du Javascript

Source / Exemple : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script>
  function carre(x,y,l,h,couleur)
  // Un rectangle, c'est pour cela qu'on l'appelle carré
  {
  return  '<div style="position:absolute;'+
		'border-left:' + l + 'px solid ' + couleur + ';'+
		'left:' + x + 'px;'+
		'top:' + y + 'px;'+
		'width : 0px;' +
		'height:' + h + 'px;'+
		'clip:rect(0,'+l+'px,'+h+'px,0);'+
		'background-color:' + couleur+
		';"><\/div>';
  }
  
  function sgn(a) {
   if(a==0){return 0};
   if(a<0){return -1};
   if(a>0){return 1};
  }
   
  
  function triangle (x1b,y1b,x2b,y2b,x3b,y3b,couleur) {
  var tmp = '';
  var x1 = x1b; var y1 = y1b;
  var x2 = x2b; var y2 = y2b;
  var x3 = x3b; var y3 = y3b;
  var i;
  var xt, yt; // On echange les valeurs;
  if(y1>y2){yt=y1;y1=y2;y2=yt;xt=x1;x1=x2;x2=xt;}
  if(y1>y3){yt=y1;y1=y3;y3=yt;xt=x1;x1=x3;x3=xt;}
  if(y2>y3){yt=y2;y2=y3;y3=yt;xt=x2;x2=x3;x3=xt;}
  Ychg1 = y3 - y1; Xchg1 = x3 - x1; Xincr1 = sgn(x3-x1);
  Ychg2 = y2 - y1; Xchg2 = x2 - x1; Xincr2 = sgn(x2-x1);
  Ychg3 = y3 - y2; Xchg3 = x3 - x2; Xincr3 = sgn(x3-x2);
  Xchg1 = Math.abs(Xchg1); Xchg2 = Math.abs(Xchg2); Xchg3 = Math.abs(Xchg3);
  var Erreur1 = 0; var Erreur2 = 0; var Erreur3 = 0;  
  var largeur = 0;
  x1b = x1;
  x2b = x1;
  if(y1!=y2) {
   for(i=y1;i<=y2;i++)
   {
    x2bb = x2b;
    x1bb = x1b;
    largeur = Math.abs(x2bb-x1bb)-1;
    if(x2bb>x1bb){tmp+=carre(x1bb,i,largeur,1,couleur)}else{tmp+=carre(x2bb,i,largeur,1,couleur)}
    Erreur1 = Erreur1 + Xchg1;
    while(Erreur1>Ychg1)
    {
     Erreur1 = Erreur1 - Ychg1;
     x1b = x1b + Xincr1; 
    } 
    Erreur2 = Erreur2 + Xchg2;
    while(Erreur2>Ychg2)
    {
     Erreur2 = Erreur2 - Ychg2;
     x2b = x2b + Xincr2; 
    }
   }
  }
  x3b = x2;
  if(y2!=y3) {
  for(i=y2;i<=y3;i++)
   {
    x3bb = x3b;
    x1bb = x1b;
    largeur = Math.abs(x3bb-x1bb)-1;
    if(x3bb>x1bb){tmp+=carre(x1bb,i,largeur,1,couleur)}else{tmp+=carre(x3bb,i,largeur,1,couleur)}
    Erreur1 = Erreur1 + Xchg1;
    while(Erreur1>Ychg1)
    {
     Erreur1 = Erreur1 - Ychg1;
     x1b = x1b + Xincr1; 
    } 
    Erreur3 = Erreur3 + Xchg3;
    while(Erreur3>Ychg3)
    {
     Erreur3 = Erreur3 - Ychg3;
     x3b = x3b + Xincr3; 
    }
   }  
  } 
  return tmp;
  }
  
  function hasard(nb)
   {
    return Math.round(nb*Math.random());
   }
  
  </script>
  </head>
  <body>
    <script>
     var h;
     var coul = new Array("black","red","blue","green","purple");
     var tmp2=''; 
     var max = 400;
      for(h=0;h<5;h++)
     {
      document.body.innerHTML += triangle(hasard(max),hasard(max),hasard(max),hasard(max),hasard(max),hasard(max),coul[hasard(5)]);
     }
      //document.body.innerHTML += tmp2;
      </script>
      
  </body>
</html>

A voir également

Ajouter un commentaire

Commentaires

Signaler
econs
Messages postés
4030
Date d'inscription
mardi 13 mai 2003
Statut
Modérateur
Dernière intervention
23 décembre 2008
 19 -
Fonctionne bien. Et sympatique.
Pas très utile en soit, mais c'est un bon exemple de dessin en général.
Signaler
kiki2sirom
Messages postés
153
Date d'inscription
mardi 17 août 2004
Statut
Membre
Dernière intervention
23 décembre 2010
 -
d'accord avec ECONS

juste : j'aime tellement pinailler : <script> n'est pas valide, à remplacer par <script type="text/javascript">

en HTML 4.01, l'attribut 'type' des balises <script> et <style> sont OBLIGATOIRES

c'est pour ton bien ;) tant qu'à faire, bien montrer aux débutants les bases

kiki
Signaler
Krackoum
Messages postés
4
Date d'inscription
mercredi 3 juillet 2002
Statut
Membre
Dernière intervention
3 juin 2006
 -
merci bcp pour ce code;
je cherche à faire une interface de dessin sur une page
à la maniere de mspaint ( je sais pas si c est deja realiser, mais vu k j en trouve pas )
j m y colle :p
donc c est tout sauf inutile pour débuter ... comme moi !
reste plus qu a charger une image sur la page pour colorier et dessiner par dessus, et ensuite l enregistrer ou la poster sur un forum ...
merci .. bcp !
Signaler
xmO77
Messages postés
3
Date d'inscription
mercredi 17 février 2010
Statut
Membre
Dernière intervention
17 février 2010
 -
Dsl de remonter un sujet si vieux, mais je débute dans le html....

JE COMPREND RIIEN !!!! ;))

quelqu'un pourrait m'aider ? merci =)
S'inscrire maintenant

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.

Du même auteur (biskbart)