캔버스에서 BeginPath() 및 closePath()의 역할 분석 예

이 기사는 캔버스의 BeginPath() 및 closePath() 기능에 대한 예제 분석을 제공합니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

beginPath의 기능은 매우 간단합니다. 새로운 경로를 시작하는 것이지만 캔버스 그리기를 사용하는 과정에서 매우 중요합니다.

먼저 작은 코드 조각을 살펴보겠습니다.

var ctx=document.getElementById("canvas").getContext("2d");
    ctx.beginPath();
    ctx.rect(150,150,100,100);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.rect(0,0,100,100);
    ctx.fillStyle="yellow";
    ctx.fill();

우리 코드에는 오류는 없지만 녹색과 노란색이 아닌 한 변의 길이가 100px인 노란색 사각형이 두 개 있습니다. 이유는 무엇입니까?

실제로 캔버스의 그리기 방법(fill, stoke)은 마지막 "beginPath" 이후의 모든 경로를 그립니다. 위 코드에서 첫 번째 직사각형은 두 번 채워지며 첫 번째는 녹색, 두 번째는 노란색으로 채워집니다. , 따라서 두 개의 노란색 직사각형을 얻습니다. 선분이나 다른 곡선, 그래픽을 그리는 경우에도 moveTo가 어디에 있든 상관없이 시작 경로가 없는 한 경로를 그리는 것입니다.

그리는 그래픽이 상상한 것과 일치하지 않으면 BeginPath를 확인하세요.

beginPath에 대해 말할 때 closePath를 언급해야 합니다. 실제로 둘은 서로 관련이 없습니다. closePath는 경로를 닫는다는 의미입니다. , 경로를 끝내는 것이 아니라 새로운 경로를 시작하는 것이 아니라 경로의 끝점을 시작점에 연결하는 것입니다.

위 코드를 처음 채운 후 closePath를 추가했는데 여전히 두 개의 노란색 직사각형이 표시됩니다.

하지만 끝에 BeginPath를 추가하면 서로 다른 색상의 두 개의 직사각형이 생성됩니다.

요약하자면, 길의 한 구간을 닫아서 새로운 길을 시작하려고 하지 마세요. 그리고 길을 닫지 않으면, 새로운 길을 시작해도 닫히지 않을 것입니다.

위 내용은 캔버스에서 BeginPath() 및 closePath()의 역할 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!