HTML5 캔버스가 복잡한 형상

Question

채우기 I 다음 코드 snipper 있습니다

 context.beginPath(); 
     context.moveTo(284 + xoff, 119 + yoff); 
     context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 243 + xoff, 29 + yoff); 
     context.moveTo(284 + xoff, 119 + yoff); 
     context.bezierCurveTo(239 + xoff, 130 + yoff, 104 + xoff, 105 + yoff, 243 + xoff, 29 + yoff); 

     context.strokeStyle = "#e2252c"; // line color 
     context.stroke(); 
     context.closePath(); 

매번 내가 토성 고리의 일종 인 윤곽에도 불구하고이 모양을 채우기는 반 타원형으로 기입 할 것 같다 작성 내가 설정 한 선들 사이에 채우기 만 할 수있는 방법이 있습니까? 나는 클리핑을 시도했지만 이것이 지금까지는 효과가 없었습니다. 내가 놓친 게 있니?

Answer 1

여기에서 문제는 점프하는 것입니다. Etch-a-Sketch로 작업하는 것과 같은 경로를 만드는 방법을 생각해보십시오. 하나의 선을 그리고 나서 다른 점으로 건너 뛰어 다른 선을 그릴 수는 없습니다. 대신 하나를 그려야하고, 멈춘 곳에서 계속해야합니다. 당신의 moveTo을했던 점에

베지에 곡선 다시

1. 하기 beginPath 반대 엔드 포인트에 첫 번째 줄에
2. 의 moveTo
3. 베지에 곡선 :이 작업을 수행하려면 위해서는 다음을 수행해야
4. 스트로크
5. 에

가 일한 다음 채우기 나 (두 번째 커브는 사용자의 요구를 충족시키기 위해 조정해야 함) :

context.beginPath(); 
context.moveTo(284 + xoff, 119 + yoff); 
context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 243 + xoff, 29 + yoff); 
context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 284 + xoff, 119 + yoff); 
context.closePath(); 
context.strokeStyle = "#e2252c"; // line color 
context.fillStyle = "#2C6BA1"; 
context.stroke(); 
context.fill();