Dessiner avec JavaScript : ensemble de fonctions JS2D

Auteur：Eve Cole Date de mise à jour：2009-06-08 18:25:42

<langage de script="javascript"> 
/****************** Ensemble de fonctions JS2D ******************* 
 
Auteur : neweroica 2003-3-28 
 
Droit d'auteur (C) 2003 
 
Veuillez conserver ces informations de droit d'auteur lors de la citation ou de la réimpression, merci !!! 
 
Cet ensemble de fonctions peut être enregistré sous forme de fichier js distinct : "JS2D.js" 
 
************************************************** * */ 
 
/**************** Dessine quelques **************** 
Coordonnées d'écran (pixels) du point x,y 
couleur couleur (valeur de chaîne) 
taille taille (pixels) 
***********************************/ 
fonction drawDot(x,y,couleur,taille){ 
document.write("<table border='0' Cellpacing=0 cellpadding=0><tr><td style='position : absolue ; gauche : "+(x)+" ; haut : "+(y)+" ;background-color : "+color+"' width="+size+" height="+size+"></td></tr></table>") 
> 
 
/****************** Tracez une ligne droite****************** 
Coordonnées écran x1,y1 (pixels) du point de départ 
Coordonnées d'écran x2,y2 (pixels) du point final 
couleur couleur (valeur de chaîne) 
taille taille (pixels) 
style style 
=0 ligne continue 
=1 ligne pointillée 
=2 ligne continue pointillée 
***********************************/ 
fonction drawLine(x1,y1,x2,y2,couleur,taille,style){ 
var je; 
var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1))); 
var theta=Math.atan((x2-x1)/(y2-y1)); 
si(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0)) 
theta=Math.PI+theta; 
var dx=Math.sin(theta);//alert(dx) 
var dy=Math.cos(theta); 
pour(i=0;i<r;i++){ 
changer(style){ 
cas 0 : 
drawDot(x1+i*dx,y1+i*dy,couleur,taille); 
pause; 
cas 1 : 
i+=taille*2; 
drawDot(x1+i*dx,y1+i*dy,couleur,taille); 
pause; 
cas 2 : 
if(Math.floor(i/4/size)%2==0){ 
drawDot(x1+i*dx,y1+i*dy,couleur,taille); 
> 
sinon{ 
i+=taille*2; 
drawDot(x1+i*dx,y1+i*dy,couleur,taille); 
> 
pause ; 
par défaut : 
drawDot(x1+i*dx,y1+i*dy,couleur,taille); 
pause ; 
> 
> 
> 
 
/****************** Dessinez un rectangle plein****************** 
Coordonnées écran x1,y1 (pixels) du point de départ (coin supérieur gauche du rectangle) 
Coordonnées d'écran x2,y2 (pixels) du point final (coin inférieur droit du rectangle) 
couleur couleur (valeur de chaîne) 
***********************************/ 
fonction drawFilledRect(x1,y1,x2,y2,color){ 
document.write("<table border='0' Cellpacing=0 cellpadding=0><tr><td style='position : absolue ; gauche : "+(x1)+" ; haut : "+(y1)+" ;background-color : "+color+"' width="+(x2-x1)+" height="+(y2-y1)+"></td></tr></table>") 
> 
 
/****************** Dessinez un rectangle****************** 
Coordonnées écran x1,y1 (pixels) du point de départ (coin supérieur gauche du rectangle) 
Coordonnées d'écran x2,y2 (pixels) du point final (coin inférieur droit du rectangle) 
couleur couleur (valeur de chaîne) 
taille taille (pixels) 
style style 
=0 ligne continue 
=1 ligne pointillée 
=2 ligne continue pointillée 
***********************************/ 
fonction drawRect(x1,y1,x2,y2,couleur,taille,style){ 
drawLine(x1,y1,x2,y1,couleur,taille,style); 
drawLine(x1,y2,x2,y2,couleur,taille,style); 
drawLine(x1,y1,x1,y2,couleur,taille,style); 
drawLine(x2,y1,x2,y2,couleur,taille,style); 
> 
 
/****************** Dessine une ellipse****************** 
Coordonnées d'écran x,y (pixels) où se trouve le centre 
a,b longueur du grand axe et du petit axe (pixels) 
couleur couleur (valeur de chaîne) 
taille taille (pixels) 
finesse des bords précise 
***********************************/ 
fonction drawOval(x,y,a,b,couleur,taille,précision){ 
var je; 
var iMax=2*Math.PI; 
var step=2*Math.PI/(precision*Math.sqrt(a*b)*4.5); 
pour(i=0;i<iMax;i+=étape){ 
drawDot(x+a*Math.cos(i),y+b*Math.sin(i),couleur,taille); 
> 
> 
 
/**************** Dessiner un polygone**************** 
Coordonnées d'écran x,y (pixels) où se trouve le centre 
r Rayon du cercle circonscrit du polygone (pixels) 
n Nombre de côtés d'un polygone 
couleur couleur (valeur de chaîne) 
taille taille (pixels) 
style style 
=0 ligne continue 
=1 ligne pointillée 
=2 ligne continue pointillée 
***********************************/ 
fonction drawPoly(x,y,r,n,couleur,taille,style){ 
var je; 
var theta=Math.PI; 
var x1=x,y1=an,x2,y2; 
pour(i=0;i<n;i++){ 
thêta-=(2*Math.PI/n); 
x2=x+r*Math.sin(theta); 
y2=y+r*Math.cos(theta); 
drawLine(x1,y1,x2,y2,couleur,taille,style); 
x1=x2; 
y1=y2;//alerte(x1+" "+y1) 
> 
> 
</script> 
 
 
<script> 
//****************** Exemple d'ensemble de fonctions JS2D ******************* 
drawLine(20,20,300,20,"#0000cc",2,0); 
drawLine(20,40,300,40,"#0000cc",2,1); 
drawLine(20,60,300,60,"#0000cc",2,2); 
drawFilledRect(20,80,300,200,"009900"); 
drawRect(20,220,220,320,"ff0000",2,0); 
drawRect(240,220,440,320,"ff0000",2,1); 
drawRect(460,220,660,320,"ff0000",2,2); 
drawOval(250,450,120,50,"006600",1,1); 
drawOval(250,650,120,120,"006600",2,0.5); 
drawPoly(200,900,100,3,"ff8800",2,0); 
drawPoly(400,900,100,4,"ff8800",2,1); 
drawPoly(600,900,100,5,"ff8800",2,2); 
drawPoly(200,1100,100,6,"ff8800",2,0); 
drawPoly(400,1100,100,7,"ff8800",2,1); 
drawPoly(600,1100,100,12,"ff8800",2,2); 
</script>