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

【问题标题】：How to restart drawing a line in HTML5 canvas with a gradient如何使用渐变重新在 HTML5 画布中绘制线条
【发布时间】：2013-01-02 20:51:43
【问题描述】：

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

    }
}

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

我希望每条线都有自己的绿色到红色渐变，而不是穿过所有线的渐变。有什么特别的东西我缺少重新开始线条或渐变。

谢谢！

【问题讨论】：

标签： javascript html canvas line gradient

【解决方案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/

【讨论】：