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>
17 févr. 2010 à 11:57
JE COMPREND RIIEN !!!! ;))
quelqu'un pourrait m'aider ? merci =)
3 juin 2006 à 14:49
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 !
21 avril 2006 à 10:45
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
20 avril 2006 à 17:34
Pas très utile en soit, mais c'est un bon exemple de dessin en général.
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.