1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Triangles en javascript

Triangles en javascript

0/5 (4 avis)

Snippet vu 12 927 fois - Téléchargée 29 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
xmO77 Messages postés 3 Date d'inscription mercredi 17 février 2010 Statut Membre Dernière intervention 17 février 2010
17 févr. 2010 à 11:57
Dsl de remonter un sujet si vieux, mais je débute dans le html....

JE COMPREND RIIEN !!!! ;))

quelqu'un pourrait m'aider ? merci =)
Krackoum Messages postés 4 Date d'inscription mercredi 3 juillet 2002 Statut Membre Dernière intervention 3 juin 2006
3 juin 2006 à 14:49
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 !
kiki2sirom Messages postés 153 Date d'inscription mardi 17 août 2004 Statut Membre Dernière intervention 23 décembre 2010
21 avril 2006 à 10:45
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
econs Messages postés 4030 Date d'inscription mardi 13 mai 2003 Statut Modérateur Dernière intervention 23 décembre 2008 23
20 avril 2006 à 17:34
Fonctionne bien. Et sympatique.
Pas très utile en soit, mais c'est un bon exemple de dessin en général.
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)