Web Development Knowledge Base
- CSS (7)
- Flash & AS (2)
- HTML (19)
- Java (5)
- JavaScript (52)
- Perl (0)
- PHP (36)
- Protocols (1)
- Python (0)
- Ruby (0)
- SQL (4)
- Linux (13)
- Misc (9)
RSS Feed
You too, please publish your useful code snippets in any programming language :
write an article !
Dépannage site web
Blog infogérance
Hébergement e-mail
Georges PLOTON - - 25/03/2008 - vue 12875 fois
Tracer un disque avec javascript
<html>
<head>
<title>Disque</title>
<!-- fonctionne avec I.E. 6.00 - Firefox 2.0
(Firefox ne tient pas compte de la couleur indiquée) -->
<script type='text/javascript'>
function TraceDisque()
{
var R = 180; // rayon du disque
var x0 = 512; // abscisse du centre (left)
var y0 = 384; // ordonnée du centre (top)
var zzz = "";
for (y = -R; y < R; y++)
{
l = Math.round(Math.sqrt(R*R - y*y));
zzz += "<hr size='1' width='";
zzz += l * 2;
zzz += "' style='position:absolute;top:";
zzz += y + y0;
zzz += ";left:";
zzz += x0 - l;
zzz += ";color:#ff0000;"; // ignoré par Firefox
zzz += "' />";
}
elem = document.getElementById("Disque");
elem.innerHTML = zzz;
}
</script>
</head>
<body>
<div id="Disque"></div>
<script type='text/javascript'>TraceDisque()</script>
</body>
</html>
Olivier Ligny - - 26/03/2008
J'ai trouvé un truc pour rendre ce script compatible avec FireFox au niveau de la couleur.Je ne sais pas trop pourquoi, mais si on ajoute color=x dans la balise <hr>, la couleur n'est plus ignorée par FF, et cela ne provoque pas de changement sous IE.
Donc remplacer : zzz += "<hr size='1' width='";
Par : zzz += "<hr color=x size='1' width='";
AS - 21/12/2008
Salut !Ton code est vraiment bien pensé, j'aime bcp l'astuce d'utiliser des HR et de jouer avec leur positionnement et leur largeur.
Je me suis permis de le mettre à jour pour qu'il soit plus clair, et pour éviter l'utilisation de la propriété innerHTML qui est déclassée désormais.
J'ai également passé les paramètres du disque à la fonction, pour qu'elle soit portable, et j'ai passé les éléments HR créés dans un tableau qui est retourné lorsqu'on appelle la fonction, afin de pouvoir en faire quelque chose par la suite (par ex. changer leur couleur dynamiquement ou les déplacer)
Voici le code :
function traceDisque(elem, rayon, absi, ordo, couleur) {
var HRs = new Array;
if(typeof(elem)=="string") elem = $(elem);
for (var i=-rayon; i<rayon; i++) {
var val = Math.round(Math.sqrt(rayon*rayon - i*i));
var newHR = document.createElement("HR");
newHR.setAttribute("color", couleur);
newHR.setAttribute("size", "1");
newHR.setAttribute("width", val*2);
newHR.setAttribute("style", "position: absolute; top:" + (i+ordo) + "px; left:" + (absi-val) + "px;");
elem.appendChild(newHR);
HRs.push(newHR);
}
return HRs;
}Merci à toi pour l'idée, les disques ainsi dessinés sont vraiment propres, même à taille réduite !
@++
AS - 22/12/2008
mea culpa, dans IE c'est ton code qui fonctionne.par contre, je changerais aussi i=-rayon pour i=1-rayon, parce que le premier hr fait un effet moche dans safari et chrome.
NB: $() équivaut à document.getElementById()
++