javascript - HTML5-canvas createLinearGradient水平

如何创建从左到右而不是从上到下的 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);

那是从上到下的，我需要怎么做才能将其从左到右更改？

最佳答案

createLinearGradient(x0, y0, x1, y1)沿着(x0，y0)到(x1，y1)的线绘制。

您的行当前从(0,0)到(0,150)。换句话说，它会向下直接缩小150个像素。

与此交换，可以跨150个像素。

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