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讓我感到困惑

回答

相關問題