clearRect가 세로선을 그릴 때 캔버스를 지우지 않습니다.

Question

저는 캔버스를 사용하여 뭔가 이상한 건물을 만들었습니다. clearRect는 캔버스의 위쪽에서 아래쪽으로가는 세로선을 그릴 때 캔버스를 지우지 않습니다. 다른 것들을 렌더링 할 때, clearRect는 잘 동작합니다.

의도적 인 동작이거나 브라우저 버그 (Chrome, Safari, Firefox 및 Opera의 Mac에서 동작이 동일하지 않으므로 명백하지 않은 부분)가 확실하지 않습니다. 의도적 인 동작이라면 누구나 그 뒤에있는 이론적 근거 및/또는 일부 문서를 지적 할 수 있습니까? http://jsfiddle.net/kZj6F/

감사 :

나는 단지 조합의 clearRect/세로 선이 캔버스를 지우지 않습니다 명확하게 동작을 표시하는 작은 테스트 케이스를 만든!

Answer 1

beginPath이 누락되면 동일한 경로에 후속 줄이 추가되어 stroke 모든 줄이 그려집니다.

clearRect 옵션을 사용하여 도트로 전환하고 행으로 돌아 가면 마지막으로 arc이 그려지는 경로에 추가 된 것을 볼 수 있습니다. 전화 번호 ctx.beginPath();을 ctx.moveTo(randomX + 0.5, 0); ctx.lineTo(randomX + 0.5, canvas.height);보다 먼저 추가하면 문제가 해결됩니다.

확인하려면 http://jsfiddle.net/kZj6F/1/을 확인하십시오.

경로에 추가되어 경로가 삭제되지 않은 경우 다른 모양으로도 변경됩니다.