Section courante

A propos

Section administrative du site

Contrairement aux légendes urbaines, il est possible en JavaScript, d'afficher un cercle ou n'importe quel autre forme graphique dans des navigateurs Web comme Internet Explorer, Netscape, Firefox et Opera. Pour arriver à se résultat cependant, il faut utilisé soit des divisions ou des tableaux et afficher un par un chacun des pixels de la forme géométrique. Vous trouverez la réponse que vous souhaitez, à l'aide du code source JavaScript suivant :

  1. <HTML>
  2. <HEAD>
  3. <SCRIPT LANGUAGE="JavaScript1.2">
  4. function SetPixel(x,y,Kr) {
  5.   var html = '';
  6.    html += '<SPAN';
  7.    html += ' STYLE="position: absolute; visibility: inherit;';
  8.    html += ' left: ' + x + 'px; top: ' + y + 'px;';
  9.    html += ' width: ' + this.dotSize + 'px; height: ' + this.dotSize + 'px;';
  10.    html += ' background-color: ' + Kr + ';';
  11.    html += document.all ? 'clip: rect (0 ' + this.dotSize + ' ' + this.dotSize + ' 0);' : '';
  12.    html += '"';
  13.    html += '>';
  14.    html += '<\/SPAN>';
  15.    
  16.    html += '<DIV ID="Pixel' + this.id + '"';
  17.    html += ' STYLE="position: absolute;';
  18.    html += ' left: ' + x + 'px; top: ' + y + 'px;';
  19.    html += ' width: ' + 1 + 'px; height: ' + 1 + 'px;';
  20.    html += ' background-color: ' + Kr + ';';
  21.    html += '"';
  22.    html += '><FONT SIZE="-3"></FONT>';
  23.    html += '<\/DIV>';
  24.    
  25.    document.write(html);
  26. }
  27.  
  28. function Circle(x,y,Rayon,LineWidth,Kr) {
  29.  x1=x-Rayon;y1=y-Rayon;x2=x+Rayon;y2=y+Rayon;
  30.  y=y1;y1=y2;y2=y;yr=Rayon;xr=Rayon;xN=x2-xr;yN=y2+yr;
  31.  Rayon-=LineWidth >> 1;a=Rayon;
  32.  for(i=0;i<LineWidth;i++) {
  33.   BO=Rayon*Rayon;AO=a*a;y=Rayon;x=0;
  34.   AO2=AO << 1;
  35.   AO4=AO << 2;
  36.   BO2=BO << 1;
  37.   BO4=BO << 2;
  38.   d=AO2*(y-1)*y+AO+BO2*(1-AO);
  39.   while(AO*y>BO*x) {
  40.    SetPixel(x+xN,yN-y,Kr);
  41.    SetPixel(x+xN,y1-yr+y,Kr);
  42.    SetPixel(x1+xr-x,yN-y,Kr);
  43.    SetPixel(x1+xr-x,y1-yr+y,Kr);
  44.    if(d>=0) {
  45.     y--;
  46.      d-=AO4*y;
  47.    }
  48.    d+=BO2*(3+(x << 1));
  49.    x++;
  50.   }
  51.   d=BO2*(x+1)*x+AO2*(y*(y-2)+1)+(1-AO2)*BO;
  52.   while(y!=0) {
  53.    SetPixel(x+xN,yN-y,Kr);
  54.    SetPixel(x+xN,y1-yr+y,Kr);
  55.    SetPixel(x1+xr-x,yN-y,Kr);
  56.    SetPixel(x1+xr-x,y1-yr+y,Kr);
  57.    if(d<=0) {
  58.     x++;
  59.      d+=BO4*x
  60.    }
  61.    y--;
  62.    d+=AO2*(3-(y << 1));
  63.   }
  64.   Rayon++;a++;
  65.  }     
  66. }
  67.  
  68. Circle(55,55,45,1,"#00FF00");
  69.  
  70. </SCRIPT>
  71. </HEAD>
  72. <BODY>
  73. Bonjour!!!
  74. </BODY>
  75. </HTML>

on obtiendra le résultat suivant :



Dernière mise à jour : Dimanche, le 12 janvier 2014