HTML5 - 캔버스 createLinearGradient 세로

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