HTML5 - canvas createLinearGradient vertical

Question

如何创建从左到右而不是从上到下的画布渐变？

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);

那个从上到下，我需要做些什么来改变它从左到右？

Answer 1

createLinearGradient(x0, y0, x1, y1)沿着从（x0，y0）到（x1，y1）的一条线进行绘制。

您的专线目前从（0,0）到（0,150）。换句话说，它直接向下150像素。

与此交换，直接跨越150像素。

var lingrad = ctx.createLinearGradient(0,0,150,0);