javascript - 如何使用渐变重新在 HTML5 Canvas 中绘制一条线

Question

我在 Canvas 上绘制了很多带有渐变的线条，我像这样绘制它，还有一个 js fiddle 链接。

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/