javascript - HTML5 - canvas createLinearGradient 水平

Question

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

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