0

我在画布中绘制了许多带有渐变的线条，我正在绘制它，也有一个 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();

    }
}

问题是我正在重新启动渐变的每个循环，但是渐变似乎只跨越所有线。如果你看一下链接，它很明显但很难解释。

我想要发生的是每条线都有自己的绿色到红色渐变，而不是穿过所有线的渐变。我是否缺少一些特别的东西来重新启动线条或渐变。

谢谢！

4

1 回答 1

2

你的梯度下降了 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：我更改了 lineWidth 以突出渐变效果：P

您甚至可以通过将渐变创建和绘制放在循环之外来缩短和加速代码：

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

于 2013-01-02T12:34:16.830 回答