[Résolu] Tracer 5 lignes verticales identiques

Bonsoir,

je voudrais tracer une ligne verticale identique au dessus de chaque onglet de mon menu de navigation.

J ai donc créer un canvas au dessus de chaque onglet, puis créer un fichier .js avec un script.

Par contre je ne connais absolument pas le javascript. Mon script ne fonctionne donc que sur le 1er canvas, a cause du getId je pense, et encore que si je met le script directement dans le fichier htm ... En externe, je ne sais pas comment faire ... Pouvez vous m'aider svp !

Mon script :

<script type="text/javascript">

var canvas = document.getElementById("barre_titre");
var context = canvas.getContext("2d");

context.beginPath();
context.lineWidth=5;
context.moveTo(0,80);
context.lineTo(80,160);
context.stroke();
</script>

Modifié par xNiux (16 Mar 2012 - 18:37)

Salut,

J'ai pas tout à fait saisi ton souci. Tu as en tout 5 éléments canvas ? tu veux créer 5 lignes identiques ? si tu fais cela ? ->

(code fait de tête)

window.onload = function(){
        var = listeElCanvas = ['CavasUn','CavasDeux','CavasTrois','CavasQuatre','CavasCinq'];
        for(var clef = 0 ; clef < listeElCanvas.length ; clef++){
            var canvas = document.getElementById(listeElCanvas[clef]); // ralllala, problème de bbcode !!! la valeur CLEF EST ENTRE CROCHETS
            var context = canvas.getContext("2d");
            context.beginPath();
            context.lineWidth=5;
            context.moveTo(0,80);
            context.lineTo(80,160);
            context.stroke();
        }
    }

Après réflection, le getElementById n'est surement pas la bonne idée. getElementsByTagName serait plus aproprié
Modifié par niuxe (17 Mar 2012 - 13:53)

Ok, super je vois ! Avec le GetTagName, ca me permettrait d'avoir plus de souplesse et de ne pas toucher au script si je rajoute un canvas c'est ca ?

Dans ce cas, le script ressemblerait à ceci :

window.onload = function()
  {
    var canvasline = document.getElementByTagName("canvas");
    
    for (var ii = 0 ; i < canvasline.length ; ii++)
      {
        var currentline = canvasline[ ii ] ;
        var context = canvasline.getContext("2d");
        context.beginPath();
        context.lineWidth=5;
        context.moveTo(0,80);
        context.lineTo(80,160);
        context.stroke();
      }
  }

Code extrapoler avec ce que j'ai vu du Js et mes connaissances en C ....

Et si plus tard je veux rajouter d'autre contenu en canvas, comment faire pour qu'ilidentifie bien les canvas "ligne" et les canevas de contenu ?
Modifié par xNiux (19 Mar 2012 - 10:09)

J'ai fais en fait plus simple : 1 id par canvas, suivi d'un appel a la fonction qui trace une ligne, avec en paramètre de fonction l'ID du canevas voulu.

merci ! Je reste néanmoins intéressé par le getname, par pur curiosité.