如何重新啓動在HTML5畫布中用漸變繪製線條

Question

我在畫布中繪製了許多漸變線條，我正在繪製它，還有一個js小提琴連接。

http://jsfiddle.net/mailrox/XWLgD/2/

var canvas = document.getElementById('c'); 
var context = canvas.getContext('2d'); 

context.fillStyle = "rgb(255, 255, 255)"; 

//draw lines 
for (i=1;i<canvas.height;i++){ 
    if(i%100 == 0){ 

     //a line 
     // linear gradient from start to end of line 
     var grad= context.createLinearGradient(50, 50, 150, 150); 
     grad.addColorStop(0, "red"); 
     grad.addColorStop(1, "green"); 

     context.strokeStyle = grad; 
     context.beginPath(); 
     //line start point 
     context.moveTo(0, (i + 20 + 0.5)); 
     //line end point 
     context.lineTo(canvas.width, (i + 20 + 0.5)); 

     context.stroke(); 

     context.closePath(); 

    } 
} 

的問題是每一個循環，我重新啓動梯度然而梯度似乎只有在所有的線路走了。如果你看看鏈接，這很明顯，但很難解釋。

我想要發生的是每條線都有自己的綠色到紅色的梯度，而梯度與所有梯度相反。有沒有什麼特別的，我想重新開始行或漸變。

謝謝！

Answer 1

您的漸變向下傾斜45度。 想象一下，您的漸變會遍歷整個區域，您可以在那裏繪製線條。

//Create a gradient groing from point (50,50) to (150,150) 
var grad= context.createLinearGradient(50, 50, 150, 150); 

這樣：：

//Create a gradient groing from point (50,50) to (150,50) 
var grad= context.createLinearGradient(50, 50, 150, 50); 

檢查了這一點：

http://jsfiddle.net/XWLgD/3/

PS：

我從這次改變了你的代碼，我改變線寬突出漸變效果：P

---

你甚至可以縮短，並通過把梯度創建和繪製你的循環之外可以加快代碼：

http://jsfiddle.net/XWLgD/4/