HTML5 Canvas: dégradés et strokeStyle m'ont confondu

Pourquoi le code suivant ne produit pas trois lignes, toutes avec des dégradés similaires?HTML5 Canvas: dégradés et strokeStyle m'ont confondu

<html> 
    <body style="background: black;"> 
     <canvas id="Test" width="516" height="404"> </canvas> 
     <script> 
     var ctx = document.getElementById('Test').getContext('2d'); 
     ctx.lineWidth = 8; 

     function addColorStops(gradient) { 
      gradient.addColorStop(0.5, 'rgba(151, 165, 193, 0.5)'); 
      gradient.addColorStop(1, 'rgba(151, 165, 193, 1)'); 
     } 

     function drawLine(x1, x2, y) { 
      var g = ctx.createLinearGradient(x1, y, x2, y); 
      addColorStops(g); 
      ctx.strokeStyle = g; 

      ctx.moveTo(x1, y); 
      ctx.lineTo(x2, y); 
      ctx.stroke(); 
     } 

     drawLine(10, 100, 10); 
     drawLine(10, 100, 30); 
     drawLine(10, 100, 50); 
     </script> 
    </body> 
</html>

lieu la première ligne obtient un gradient très très faible, la deuxième ligne obtient un gradient très bon, et le dernier obtient un gradient drastique.

Je pense que cela découle d'une mauvaise compréhension de la façon dont les paramètres soit à createLinearGradient sont censés travailler, ou malentendu comment strokeStyle missions influent coups futurs ...

Source

2010-11-15 Domenic

Agh, je compris. Je dois ajouter un ctx.beginPath() juste avant le ctx.strokeStyle = g;. Il s'avère que les lignes font partie d'un chemin et donc si vous ne commencez pas un nouveau chemin, il pensera que vous continuez l'ancien, et donc utilisez votre point de départ et point final comme le début et la fin à des fins de gradient.

Source

2010-11-15 05:36:46 Domenic

Je remplaçais le strokeStyle! En ajoutant un beginPath, mes couleurs de trait fonctionnent.

ctx.beginPath(); ctx.moveTo (x, y); ctx.lineTo (x, y); ctx.strokeStyle = "# 182945"; ctx.stroke();

Remerciements

Source

2011-03-22 13:43:25 iancrowther

HTML5 Canvas: dégradés et strokeStyle m'ont confondu

Répondre

Questions connexes