我在 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();
}
}
问题是每个循环我都会重新启动渐变,但是渐变似乎只穿过所有线条。如果你看一下链接,它很明显但很难解释。
我希望发生的是每条线都有自己的绿色到红色渐变,而不是所有线条的渐变。我是否缺少一些特殊的东西来重新启动线条或渐变。
谢谢!
最佳答案
您的梯度向下倾斜 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);
看看这个:
PS:我更改了线宽以突出渐变效果:P
<小时/>您甚至可以通过将渐变创建和绘制放在循环之外来缩短和加速代码:
关于javascript - 如何使用渐变重新在 HTML5 Canvas 中绘制一条线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14121989/