HTML5 Canvas line drawing

Question

변수를 임의의 숫자로 설정 한 다음 매번 y 좌표가 다른 캔버스에 선을 만듭니다. 프로그램에서 하나의 버튼은 울퉁불퉁 한 선을 생성하고 다른 하나는 훨씬 매끄러운 선을 만드는 일부 코드를 사용합니다.

지금은 무작위로 생성 된 선 아래 공간을 채우는 방법으로 언덕을 닮았지만 몇 가지 문제가 있습니다.

"text/javascript"영역에서 캔버스 및 해당 좌표와 모든 임의 값 변수를 정의합니다 (단, 아직 사용되지는 않음). "울퉁불퉁 한"버튼을 클릭하면 캔버스 안의 모든 요소에 y 좌표 변수를 설정 한 다음 그 선을 그립니다. "Smooth"버튼을 클릭하면 코드가 임의로 첫 번째 y 좌표 변수를 설정 한 다음 다음 변수를 조금 더 크게 또는 이전 점보다 조금 작게 설정 한 다음 선을 그립니다. 세 번째 단추를 "채우기"라고합니다. 이 버튼은 언덕이 아직 그려져 있는지 확인하고, 모든 y 좌표 값 +10을 사용하여 다른 선을 그리기 시작하는 다른 함수를 실행합니다. 즉, 원래의 선 바로 아래에 선을 그립니다. 단추의 선을 캔버스의 맨 아래까지 늘려 선 아래 공간을 채우는 것이 내 계획이었습니다. 이것이 이상한 곳입니다. 문제는 "채우기"버튼이 다른 기능에서 생성 된 정보 (변수에 저장 됨)를 사용한다는 것입니다.

어떻게해야합니까?

미리 감사드립니다.

Answer 1

원하는 경로로 전체 경로를 만들고 싶지만 ctx.stroke() or ctx.fill()을 호출 한 다음 두 개 이상의 선분을 추가하십시오. 하나는 오른쪽 하단에, 다음 하나는 하단 왼쪽.

그러면 상자에 3면을 그렸습니다. 위쪽, 오른쪽 및 아래쪽 상단은 실제로 많은 선분 (또는 커브)이지만 그다지 중요하지는 않습니다. 아이디어는 같습니다. 그런 다음 ctx.fill()으로 전화하면 해당 상자에 내용이 채워집니다.

그래서 당신이 ctx.fill 전화 (당신이 먼저 ctx.close()를 호출 할 수 있습니다 쓰다듬어하는 경우 당신은. 당신은 그냥 작성하고 이후 왼쪽을 그릴 필요가 없습니다)()를 한 번 마지막에 그 전체 바닥 공간이

여기에 라이브 예제

채워집니다 : http://jsfiddle.net/wKVRR/