HTML5画布：渐变和strokeStyle让我感到困惑

为什么下面的代码不会产生三行，都具有相似的渐变？HTML5画布：渐变和strokeStyle让我感到困惑

<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>

代替第一线得到一个非常非常轻微的坡度，第二行得到了相当不错的梯度，最后得到了大幅度的梯度。

我想从任如何参数createLinearGradient都应该工作，或者误解strokeStyle分配如何影响未来招...

来源

2010-11-15 Domenic

哎，我想通了误解源于此。我需要在ctx.strokeStyle = g;之前添加一个ctx.beginPath()。事实证明，线条是一条路径的一部分，因此如果你没有开始一条新路径，它会认为你仍然在继续旧的路线，因此使用你的原始起点和最终终点作为起点和终点为梯度目的。

来源

2010-11-15 05:36:46 Domenic

我得到了strokeStyle覆盖！通过添加一个beginPath我的笔画颜色工作..

ctx.beginPath（）; ctx.moveTo（x，y）; ctx.lineTo（x，y）; ctx.strokeStyle =“＃182945”; ctx.stroke（）;

谢谢

来源

2011-03-22 13:43:25 iancrowther

HTML5画布：渐变和strokeStyle让我感到困惑

回答

相关问题