캔버스가 선형 그래디언트로 채워진 둥근 사각형을 그리기

Question

선형 그래디언트가 채워진 rect를 그리는 데 문제가 있습니다. 두 스크린 샷은 Chrome (왼쪽)과 Firefox (오른쪽)에서 가져온 것입니다. 보시다시피 그라디언트는 첫 번째 170 픽셀의 rect에만 적용됩니다 (오른쪽 이미지에서 더 잘 볼 수 있습니다. 파이어 폭스는 나머지를 colorStop으로 채우므로 마지막 이미지를 추가 할 수 있습니다). 다음 코드는 200px의 그라디언트 높이로 rect를 채우며 왜 170px 만 채워지는지 알지 못합니다. 높이 = 200, 왼쪽 = 30, 위쪽 = 30, 너비 = 300, 반경 = 3; 도움을

//Fill 
var lingrad = gcx.createLinearGradient(0, top, 0, Height); 
lingrad.addColorStop(0, 'white'); 
lingrad.addColorStop(0.5, '#66CC00'); 
lingrad.addColorStop(0.5, 'red'); 
lingrad.addColorStop(1, 'white'); 
lingrad.addColorStop(1, 'blue'); 
gcx.fillStyle = lingrad; 
gcx.beginPath(); 
gcx.lineWidth = 1; 
gcx.moveTo(left + radius, top); 
gcx.lineTo(left + Width - radius, top); 
//Top-right-corner: 
gcx.arc(left + Width - radius, top + radius, radius, (Math.PI/180) * 270, (Math.PI/180) * 0, false); 
gcx.lineTo(left + Width, top + Height - radius); 
//Bottom-right-corner: 
gcx.arc(left + Width - radius, top + Height - radius, radius, (Math.PI/180) * 0, (Math.PI/180) * 90, false); 
gcx.lineTo(left + radius, top + Height); 
//Bottom-left-corner: 
gcx.arc(left + radius, top + Height - radius, radius, (Math.PI/180) * 90, (Math.PI/180) * 180, false); 
gcx.lineTo(left, top + radius); 
//Top-left-corner: 
gcx.arc(left + radius, top + radius, radius, (Math.PI/180) * 180, (Math.PI/180) * 270, false); 
gcx.closePath(); 
gcx.fill(); 

감사합니다!

Answer 1

그래디언트 높이가 기울기의 y1- 시작점을 기준으로 계산되지 않아 문제가 발생합니다.이 높이는 캔버스 요소의 y0- 시작점에서 계산됩니다. y2에 대한 코드를 y2 + y1 (종점은 시작점을 기준으로 계산 됨)으로 변경하여 문제가 해결되었습니다.

var lingrad = gcx.createLinearGradient(x1, y1, x2, y2 + y1);