그라데이션 채우기는 캔버스 위치가 아닌 모양 위치와 관련이 있습니까?

Question

필자가 이해하는 바와 같이 그라디언트 칠은 실제로 채우는 모양에 상대적이 아닌 캔바스 요소 자체 (즉, 0, 0)를 기준으로 지정해야합니다.

질문 : 이 주장에 맞습니까? 그 주위에 제안 된 방법이 있습니까? 예 (JSFiddle here)에 대한

: 거기

ctx.beginPath(); 
    ctx.rect(40, 50, 100, 70); 
    var grd = ctx.createLinearGradient(0, 50, 0, 120); 
    grd.addColorStop(0, "red"); 
    grd.addColorStop(1, "blue"); 
    ctx.fillStyle = grd; 
    ctx.fill(); 

, 나는 사각형을합니다. 그 모양의 왼쪽 상단부터 시작하여 그라디언트로 채우기를 기대했지만, 처음 두 매개 변수로 0, 0을 전달했습니다. 캔버스를 기준으로 사각형의 X/Y 좌표를 대신 전달해야합니다.

예를 들어, 수학 천재가 아니기 때문에 커브의 상단 위치 (제어점 만)를 알지 못하기 때문에이 곡선이 2 차 곡선으로 작성된 경우 문제가됩니다.

Answer 1

그리는 도형의 범위를 모른다면 시간이 많이 걸릴 것입니다.

그라디언트를 사용하는 경우, 특히 그라디언트를 다시 사용하는 경우 항상 그라디언트와 모양을 원점에서 만들고이를 자신이있는 위치로 변환하는 것이 가장 좋습니다.

그런 종류의 시스템을 설정하면 그라디언트를 정의하는 것이 개체 크기에 비례하여 더 많아 지지만 경계 계산을 직접 수행해야합니다.

여기에 그라데이션 번역의 예와 캔버스는 "상대적으로"만드는 모양 : 도움을

http://jsfiddle.net/simonsarris/RFgcs/