BeginPath의 기능은 매우 간단합니다. 새 경로를 시작하는 것이지만 캔버스 그리기를 사용하는 과정에서 매우 중요합니다.
먼저 작은 코드를 살펴보겠습니다.
var ctx=document.getElementById(canvas).getContext(2d); ctx.lect(150,150,100,100); ctx.fill(0,0,100,100); .fillStyle=노란색; ctx.fill();
코드에는 오류가 없지만 녹색 하나와 노란색 하나 대신 측면 길이가 100px인 두 개의 노란색 사각형이 표시됩니다. 이유는 무엇입니까?
실제로 캔버스의 그리기 메서드(fill, stoke)는 마지막 BeginPath 이후의 모든 경로를 그립니다. 위 코드에서 첫 번째 직사각형은 두 번 채워지며, 첫 번째는 녹색이고 두 번째는 노란색이므로 두 개의 노란색 직사각형이 채워집니다. 선분이나 다른 곡선, 그래픽을 그리는 경우에도 마찬가지로 moveTo가 없는 한 경로를 그리는 것입니다.
그리는 그래픽이 상상한 것과 일치하지 않으면 BeginPath를 확인하는 것을 잊지 마십시오.
BeginPath에 대해 이야기할 때 closePath를 언급해야 합니다. 실제로 둘은 서로 관련이 없습니다. closePath는 경로를 종료하는 것이 아니라 경로의 끝점을 시작점에 연결한다는 의미입니다. , 새로운 길을 시작하지 마십시오.
위 코드를 처음 채운 후에 closePath를 추가했는데 여전히 두 개의 노란색 직사각형이 표시됩니다.
그러나 나중에 BeginPath를 추가하면 서로 다른 색상의 두 개의 직사각형이 생성됩니다.
요약하자면, 경로의 한 부분을 닫아서 새 경로를 시작하려고 하지 마세요. 경로를 닫지 않으면 새 경로를 시작하더라도 닫히지 않습니다.
보충: 캔버스의 Beginpath 및 Closepath 이해BeginPath() 메서드
var ctx = document.getElementById ( 'cvs' ) ctx.beginPath ( ) ctx.lineTo ( 200.5 , 20.5 ) ;ctx.moveTo(100.5, 40.5); ctx.lineTo ( 200.5 , 40.5 ) ctx.StrokeStyle = '#f00' ctx.
0.5는 흐릿한 선을 피하기 위한 것입니다. 그렇다면 위의 코드는 어떤 종류의 그래픽을 얻게 될까요? 검은색 선과 빨간색 선인가요?
코드 관점에서 볼 때 논리에는 문제가 없지만 결과적으로 검은색 선과 빨간색 선이 아닌 두 개의 빨간색 선이 표시됩니다.
그 이유를 이해했다면 나머지 부분은 읽을 필요가 없습니다. 이것이 BeginPath의 중요성입니다.
캔버스의 그리기 방법(예: 획, 채우기)은 마지막 BeginPath 이후의 모든 경로를 기반으로 그려집니다. 예를 들어 위 코드에서 두 번 스트로크했습니다. 실제로 이 두 스트로크는 첫 번째 BeginPath 이후의 모든 경로를 기반으로 했습니다. 즉, 첫 번째 경로를 두 번 획을 그었고, 첫 번째 획은 검은색이었고 두 번째 획은 빨간색이었기 때문에 결국에도 빨간색이었습니다.
1. moveTo를 사용하여 브러시를 이동하는 위치에 관계없이 startPath를 사용하지 않는 한 항상 경로를 그리는 것입니다.
2. 독립된 영역을 직접 그리는 fillRect, 스트로크Rect 등의 함수는 현재 경로를 방해하지 않습니다.
그리는 그래픽이 상상한 것과 다른 경우에는 합리적인 BeginPath가 있는지 확인하는 것을 잊지 마세요.
-------
BeginPath에 관해 말하면 closePath를 언급해야 합니다. 둘은 밀접하게 관련되어 있습니까? 대답은 거의 아무것도 아닙니다.
closePath는 경로를 종료한다는 의미가 아니라 경로를 닫는다는 의미입니다. 현재 경로의 끝부터 시작점까지 경로를 연결하여 전체 경로를 닫으려고 합니다. 그러나 이것이 그 이후의 길이 새로운 길이라는 것을 의미하지는 않습니다!
위 코드의 첫 번째 lineTo 뒤에 closePath를 추가했는데 여전히 두 개의 빨간색 선이 표시되는 것을 확인할 수 있습니다.
그러나 첫 번째 스트로크 다음에 BeginPath를 추가하면 예상대로 검은색 선과 빨간색 선이 표시됩니다.
ctx.Stroke( ) ; ctx.beginPath( ) ; ctx.moveTo ( 100.5 , 40.5 ) ; ctx.lineTo ( 200.5 , 40.5 ) ctx.strokeStyle = '#f00' ;
요약하자면, 기존 경로를 닫아 새 경로를 시작하려고 하지 마세요. 새 경로를 시작할 때 이전 경로는 닫히지 않습니다.