开发者

HTML5 - canvas createLinearGradient horizontal

开发者 https://www.devze.com 2023-01-12 21:32 出处:网络
How can I create a canvas gradient that goes from left to right as opposed to top to down? var lingrad = ctx.createLinearGradient(0,0,0,150);

How can I create a canvas gradient that goes from left to right as opposed to top to down?

var lingrad = ctx.createLinearGradient(0,0,0,150);
 lingrad.addColorStop(0, '#00ABEB');
 lingrad.addColorStop(0.5, '#fff');
 lingrad.addColorStop(0.5, '#66CC00');
 lin开发者_开发百科grad.addColorStop(1, '#fff');

 ctx.fillStyle = lingrad;
 ctx.fillRect(10,10,780,130);

That one goes from top to down, what do I need to do to change that to go from left to right?


createLinearGradient(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1).

Your line is currently going from (0,0) to (0,150). In other words it's going straight-down 150 pixels.

Exchange it with this, which goes straight-across 150 pixels.

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

精彩评论

暂无评论...
验证码 换一张
取 消