Question

我在画布上绘制了许多带渐变的线条，我这样绘制它，也有一个js小提琴链接。

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：我更改了lineWidth以突出显示渐变效果：P

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

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

如何使用渐变重新开始在HTML5画布中绘制线条

1 个答案: