HTML5 - 用canvas创建水平线性渐变

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

那个从上到下的方向，我需要怎么做才能让它从左到右？

- teepusink

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

- Simon Sarris