캔버스 학습 요약 3: 그리기 경로 - 선분

Canvas 그리기 환경의 일부 그리기 방법은 직접 그리기 방법이고 일부 그리기 방법은 경로 기반입니다.

그래픽을 즉시 그리는 방법에는 뇌졸중Rect()와 fillRect() 두 가지가 있습니다.

SVG(Scalable Verctor Graphics, 확장 가능한 벡터 그래픽), Adobe Illustrator 등과 같은 대부분의 그리기 시스템은 경로를 기반으로 합니다.

이러한 드로잉 시스템을 사용할 때는 먼저 경로를 정의한 다음 경로를 획 또는 칠해야 합니다. 또는 모양이 표시될 수 있도록 획을 긋고 채울 수도 있습니다.

캔버스의 세 가지 그리기 방법:

캔버스 그리기 환경에서는 선형 경로라고 하는 경로를 기반으로 선 세그먼트도 그려집니다. 선형 경로를 만드는 방법은 moveTO() 및 lineTo()입니다. 경로를 만든 후에는 스트로크() 메서드를 호출해야 합니다. 세그먼트는 캔버스에 그려집니다.

이것은 앞서 언급한 경로 기반 그리기 방법으로, 획을 그거나 채워야 합니다.

일반적으로 두 점은 선으로 연결되므로 선분을 그리는 것은 매우 간단합니다. moveTO()를 통해 선의 시작점을 지정하고, lineTo()를 통해 다른 점으로 이동합니다.

 함수 drawLine(){ cxt.moveTo(50, 50);}

그러나 앞서 경로 기반 그리기 방법은 스트로크를 하거나 채워야 한다고 언급한 바 있습니다. 따라서 결과를 보려면 스트로크() 메서드도 사용해야 합니다.

따라서 선분이 그려지도록 메소드를 다음과 같이 수정합니다.

 function drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(200, 200);}

lineTo()만 사용하여 캔버스에 선분을 그릴 수도 있습니다. 위 코드를 아래와 같이 변경해도 효과는 동일합니다.

 function drawLine(){ cxt.lineTo(50, 50); cxt.lineTo(200, 200);}

moveTo() 및 lineTo() 사용법 요약

• moveTo(x,y): 지정된 좌표 x 및 y로 스트로크를 이동하고 현재 경로에 하위 경로를 추가합니다. 이 메서드는 현재 경로의 하위 경로를 지우지 않습니다.
• lineTo(x,y): 현재 위치에서 지정된 x 및 y 위치까지 직선을 그립니다. 현재 경로에 하위 경로가 없으면 이 메서드는 moveTo()와 동일하게 동작합니다. 현재 경로에 하위 경로가 있는 경우 이 메서드는 하위 경로에 지정한 지점을 추가합니다.

선분의 너비 변경

 함수= 14; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

 function drawLine(){ cxt.lineWidth = 14; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

CanvasGradient 객체나 CanvasPattern 객체를 사용하여 선분에 그라데이션 색상이나 패턴을 추가할 수도 있습니다.

 function drawLine(){ cxt.lineWidth = 14; var 그래디언트 = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2); 그래디언트.addColorStop(0, 'blue'); 0.5, '보라색');gradient.addColorStop(1, '노란색'); 그라데이션; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

위 캔버스의 세 가지 그리기 방법에서 두 번째 행의 호 경로는 열린 경로이고 마지막 행의 호 경로는 닫힌 경로임을 알 수 있습니다. 그렇다면 닫힌 경로는 어떻게 달성됩니까?

캔버스에 경로를 그리는 더 중요한 두 가지 방법을 살펴보겠습니다.

• BeginPath(): 현재 경로를 재설정하고 경로를 다시 계획하려면 현재 하위 경로를 모두 지웁니다.
• closePath(): 열린 경로를 닫는 데 사용됩니다. 그래프가 이미 닫혀 있는 경우, 즉 현재 점이 시작점인 경우 이 함수는 아무 작업도 수행하지 않습니다.

먼저 폴리라인을 그립니다.

 function drawLine(){ cxt.StrokeStyle = '녹색'; cxt.moveTo(50, 50); cxt.lineTo(150, 150); );}

위 예제의 코드를 수정하고 코드에 BeginPath() 및 closePath() 메서드를 추가합니다.

 function drawLine(){ // 스트로크 삼각형 cxt.lineWidth = 2 cxt.moveTo(50, 50); (); cxt.beginPath(); cxt.lineTo(150, 250); cxt.스트로크();}

캔버스에 두 개의 경로를 그린 것을 볼 수 있습니다.

참고: BeginPath()를 호출한 후 또는 캔버스가 처음 생성될 때 첫 번째 경로 구성 명령은 일반적으로 moveTo()로 간주됩니다. 따라서 그래픽을 그릴 때는 반드시 BeginPath()를 먼저 사용해야 합니다.

계속해서 코드를 수정해 보겠습니다.

 function drawLine(){ //스트로크 삼각형 cxt.lineWidth = 2 cxt.lineTo(50, 150); (150, 150);cxt.closePath(); //폴리라인 cxt.translate(150, 0); cxt.lineWidth = 2; cxt.moveTo(50, 50); cxt.lineTo(150, 150); cxt.closePath(); //녹색으로 채워진 삼각형 cxt.fillStyle = 'green' cxt.beginPath(); .lineTo(50, 150);cxt.lineTo(150, 150); cxt.fill(); cxt.closePath(); //빨간색으로 채워진 삼각형 cxt.fillStyle = 'red' cxt.beginPath(); 50, 50); cxt.lineTo(50, 150); 150); cxt.closePath();

위의 예에서 closePath()의 다양한 위치가 그래픽에도 영향을 미치는 것을 볼 수 있습니다.

참고: fill() 함수를 호출하면 닫히지 않은 모든 모양이 자동으로 닫히므로 지금은 closePath() 함수가 필요하지 않습니다.

그러나 스트로크() 호출: 스트로크() 메서드 전에 closePath()만 사용하면 닫힌 경로가 형성됩니다. 스트로크() 메서드 후에 closePath() 메서드를 호출하면 그래픽이 그려지고 현재 그리기 경로가 닫혀서 closePath() 메서드가 작동하지 않습니다.

먼저 예시를 살펴보겠습니다

 function drawLine(){ //스트로크 삼각형 cxt.beginPath() cxt.lineTo(450, 50); ; cxt.moveTo(50.5, 150.5); cxt.lineTo(450.5, 150.5);}

그림에서 볼 수 있듯이 두 선분의 lineWidth를 1픽셀로 설정했지만 위의 선분은 2픽셀을 그립니다.

특정 2픽셀의 경계에 1픽셀 너비의 선분을 그리는 경우 선분은 실제로 2픽셀 너비를 차지하게 됩니다.

픽셀 테두리에 1픽셀 너비의 수직선 세그먼트를 그릴 때 캔버스 그리기 환경 개체는 테두리 중심선 오른쪽에 1/2픽셀을 그리고 테두리 왼쪽에 나머지 1/2픽셀을 그리려고 시도하기 때문입니다. 중심선.

그러나 전체 픽셀 내에서 너비의 절반인 선분을 그릴 수 없으므로 양방향 픽셀의 절반이 1픽셀로 확장됩니다.

반면, 그리기는 두 픽셀 사이에서 이루어지므로 중심선을 기준으로 왼쪽과 오른쪽의 절반 픽셀이 확장되지 않고 합쳐서 정확히 1픽셀 폭을 차지하게 됩니다. 따라서 실제로 1픽셀 너비의 선분을 그리려면 두 픽셀 사이에 선분을 그려야 합니다.

이제 실제 1픽셀 선분을 그리는 방법을 이해했으므로 그리드 그리기를 시작해 보겠습니다.

 function drawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.StrokeStyle = 'green'; //세로선 그리기 for(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx) cxt .beginPath(); cxt.moveTo(i, 0); cxt.canvas.height); cxt.Stroke(); } //가로선 그리기 for(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); moveTo (0, i); cxt.lineTo(cxt.canvas.width, i); }}drawLine(10, 10);

위의 예에서는 두 픽셀 사이의 픽셀에 선분을 그리는데, 그려진 선분의 너비는 0.5픽셀에 불과합니다.

캔버스 사양에 명시적으로 규정되어 있지는 않지만 모든 브라우저 캔버스 구현에서는 앤티앨리어싱 기술을 사용하여 하위 픽셀 선분 그리기 효과를 만듭니다.

이 섹션에서는 주로 캔버스에 선형 경로를 그리는 방법을 설명합니다. 주로 moveTo()를 사용하여 시작점을 정의하고, lineTo()를 사용하여 끝점을 정의하고, 스트로크()를 사용하여 현재 경로를 그립니다. 이 세 가지 방법은 선분을 그립니다.

캔버스에 경로를 그리는 데는 두 가지 중요한 메서드인 BeginPath()와 closePath()가 있습니다. 그래픽을 그리기 전에 BeginPath()를 호출하는 것은 여러 그래픽을 그리는 데 필요한 단계입니다.

fill() 사용 시 closePath()는 생략 가능하며, closePath() 메서드 호출 위치에도 주의해야 합니다.

선분을 그릴 때 lineWidth를 사용하여 선분의 너비를 변경하고, 스트로크스타일을 사용하여 선분의 색상을 변경할 수 있습니다.

선분의 픽셀 경계를 파악하여 실제 1픽셀 선 너비를 그릴 수 있습니다.

캔버스에 그래픽을 그리는 데 관심이 있는 학생분들은 계속해서 업데이트에 관심을 가져주시고, 잘못된 점이 있으면 지적해 주시고 더 많은 소통 부탁드립니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.