0
votes

J'ai besoin de dessiner des lignes en utilisant le tableau des coordonnées

<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>

javascript html5-canvas

0 commentaires

3 Réponses :

1
votes

the .MOVETO () méthode attend deux arguments, un x code> et un y code>. Actuellement, vous fournissez un argument sous la forme d'un tableau [x, y] code>. Vous avez quelques façons que vous pouvez résoudre ce problème, une solution est d'utiliser .Apply (CTX, A [I]) code> . Un autre moyen plus moderne, consiste à utiliser le Spread Syntaxe Pour utiliser les deux éléments dans les tableaux sous forme d'arguments distincts:

p>



<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>

0 commentaires

0
votes

<html>
<body>
    <canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>  
</body>

<script>

    var canvas_ele = document.getElementById("lineCanvas");
    var ctx = canvas_ele.getContext("2d");

    var a = 
    [        
        [6,455],
        [232,357],
        [476,316],
        [754,67]
    ];

    ctx.beginPath();
    ctx.moveTo(a[0][0],a[0][1]);
    ctx.lineTo(a[1][0],a[1][1]);
    ctx.lineTo(a[2][0],a[2][1]);
    ctx.lineTo(a[3][0],a[3][1]);
    ctx.stroke();

</script>

</html>

0 commentaires

1
votes

chemin2D code> Vous pouvez utiliser

 chemin2D  code>  a > Pour créer les chemins.  p>  L'exemple Créer ajoute de nombreux objets  Path2D  code> pour créer un seul  Chemin2D  code> objet qui peut être rendu avec un seul appel et est beaucoup plus rapide que de recréer le chemin à chaque fois que vous devez le rendre.  p> 
 La fonction  CreateReine  code> crée un trajet à partir d'une gamme de points de chemin  [[x, y ], [x, y]]  code> (avec option pour fermer le chemin) et  Createlines  code> crée des chemins d'un tableau de réseaux de points de chemin, `[[[[x , y]], [[x, y], [x, y]]]].  p> 
  note  forte> que lors de la création d'un nouveau chemin, il n'est pas nécessaire de faire le premier appel  MOVETO  CODE>, vous pouvez utiliser  lineto  code> car il agira comme  MOVETO  code>. La même chose s'applique lors du rendu au contexte 2D. Vous pouvez utiliser  lineto  code> plutôt que  moveto  code> directement après  beginPath  code>. Cela rend le codage plus compact lors de l'itération des données de points.  P> 
  p> 


<canvas id="canvas" width="256" height="256"></canvas>

1 commentaires

wow, ne connaissait jamais la path2d. Gree réponse. J'ai beaucoup appris de ça!