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