(HTML5 캔버스/자바 스크립트)

Question

나는이 빨간색으로 채워 두 호를 생성하고, 내가 말할 수있는 다양한 색상

 //-------------- draw 
     ctx.beginPath(); 
     ctx.fillStyle = "black"; 
     ctx.arc(30, 30, 20, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.fillStyle = "red"; 
     ctx.arc(100, 100, 40, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.closePath(); 

가득 여러 원 호를 그리려고

더 작은 것의 주위에 희미한 까만 윤곽이있다.

는 아무도 내가이 작업을 수행 할 수있는 방법에 도움이 되거 수 있습니까? 내가 뭘 잘못하고있어?

Answer 1

경로를 닫은 다음 다시여십시오.

ctx.closePath(); 
ctx.beginPath(); 

jsFiddle.

... 호 그리기 코드 사이.

Answer 2

경로는하기 beginPath로 시작하고 끝나는 endPath. 사이의 모든 것이 같은 경로입니다. 날개 규칙을 사용하여 구멍이있는 패스를 그릴 수도 있습니다. 한 방향으로 무언가를 그리고 다른 방향으로는 무언가를 그린다. 선을 사용하여 가운데에 구멍이있는 직사각형을 그려 보겠습니다. beginPath(); moveTo (10,10); lineTo (100,10); 에 lineTo ((100,60)에 lineTo (10,60)에 lineTo (10,10) 히며 closePath(); 의 moveTo (20,20)를, 에 lineTo (20,50)에 lineTo (90 50) 에 lineTo (90,20) 에 lineTo (20, 20); 히며 closePath(); endPath(); 채우기();

당신은 어떤 모양이 작업을 수행 호를 시도 할 수

. 한 방향으로 다른 방향으로 반대쪽 방향으로 더 작은 반경을 사용하십시오.