javascript HTML5 - 画布 createLinearGradient 水平
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3568804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 - canvas createLinearGradient horizontal
提问by teepusink
How can I create a canvas gradient that goes from left to right as opposed to top to down?
如何创建从左到右而不是从上到下的画布渐变？
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(1, '#fff');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,780,130);
That one goes from top to down, what do I need to do to change that to go from left to right?
那个是从上到下的，我需要做些什么来改变它从左到右？
回答by Simon Sarris
createLinearGradient(x0, y0, x1, y1)paints along a line from (x0, y0) to (x1, y1).
createLinearGradient(x0, y0, x1, y1)沿着从 (x0, y0) 到 (x1, y1) 的线绘制。
Your line is currently going from (0,0) to (0,150). In other words it's going straight-down 150 pixels.
您的线路当前从 (0,0) 到 (0,150)。换句话说，它会直接向下 150 像素。
Exchange it with this, which goes straight-across 150 pixels.
用它交换它，它直接跨越 150 个像素。
var lingrad = ctx.createLinearGradient(0,0,150,0);
