캔버스 내 선분의 끝점과 연결점에 대한 자세한 설명

캔버스에서 선분은 경로 유형이기도 하며 이를 선형 경로라고 합니다. Canvas에서 선형 경로를 그리는 데는 주로 moveTo(x,y), lineTo(x,y) 및 스트로크() 메서드를 사용합니다. 선 너비의 사용법을 기억해 보겠습니다.

function drawLine(){
    cxt.lineWidth = 3;
    cxt.moveTo(10, 10);
    cxt.lineTo(120, 100);
    cxt.stroke();
}

위 코드를 사용하면 너비가 3픽셀인 선분을 그릴 수 있습니다.

이전 장에서 우리는 선 너비와 픽셀 경계에 대해서도 언급했습니다.
특정 2픽셀의 경계에 1픽셀 너비의 선분을 그리면 선분은 실제로 2픽셀을 차지하게 됩니다.

픽셀 경계에서 너비가 1픽셀인 수직 선분을 그릴 때 캔버스 그리기 환경 개체는 테두리 중심선 오른쪽에 0.5픽셀을 그리고 다른 픽셀을 그리려고 하기 때문입니다. 반픽셀 테두리 중앙선 왼쪽.

단, 전체 픽셀 내에서 너비가 1/2픽셀인 선분을 그릴 수 없으므로 양방향의 1/2픽셀이 1픽셀로 확장됩니다. (구체적인 내용은 3장을 참조하세요.)

오늘의 장에서는 이를 사용하여 선분, lineCap 및 lineJoin의 다른 속성을 살펴보겠습니다.

선분의 끝점(lineCap)

선분을 그릴 때 캔버스 그리기 환경에서 "선 캡"(lineCap)이 보이는 것처럼 선분의 끝점을 제어할 수 있습니다. 객체에서 선분의 끝점을 제어합니다. 이 속성은 lineCap이라고도 합니다.
선분의 끝점 스타일에는 butt, roundm 및 square의 세 가지 값이 있습니다. 기본값은 butt입니다. 둘 다 선분의 끝점에 모자를 그립니다.

• butt: 선분 끝점의 기본 스타일

• round: 선 너비의 절반에 해당하는 반경을 가진 반원을 끝점에 추가합니다.

• 사각형: 끝점에 직사각형을 추가합니다. 길이는 선 너비와 일치하고 너비는 선 너비의 절반입니다.

이것만 보면 딱히 흥미로운 점은 없는 것 같습니다. 그럼 먼저 그려보시면 바로 이해가 되실 겁니다. 그렇지 않으면 모두가 데이터 시각화에 대해 이야기합니다!

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineCap = 'butt';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'round';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineCap = 'square';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.stroke();
}

위의 그림을 보면 lineCap의 속성값 스타일을 바로 알 수 있고, 시각화의 매력도 느끼게 됩니다.

선분의 연결점(lineJoin)

선분이나 직사각형을 그릴 때 두 선분의 연결점인 변곡점을 제어할 수 있습니다. 선분.
캔버스 그리기 환경에서 선분의 연결점은 lineJoin 속성에 의해 제어됩니다.
lineJoin 속성에는 round, bevel, miter의 세 가지 값이 있습니다. 기본값은 miter입니다.

• 원호를 추가로 채웁니다. 호는 두 선분의 모서리 외부 가장자리를 연결하여 형성됩니다.

• 베벨: 삼각형을 2개 추가로 채웁니다. 선분 모서리의 바깥쪽 가장자리에 있는 점은 직선으로 연결됩니다.

• 미터: 두 선분 모서리의 바깥쪽 가장자리 연장선의 교차점으로 형성된 추가 다각형을 채웁니다.

마찬가지로 그려서 살펴보자

function lineCap(){
    cxt.lineWidth = 20;
    cxt.strokeStyle = '#16a085';

    cxt.beginPath();
    cxt.lineJoin = 'round';
    cxt.moveTo(20, 20);
    cxt.lineTo(300, 20);
    cxt.lineTo(300, 60);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineJoin = 'bevel';
    cxt.moveTo(20, 100);
    cxt.lineTo(300, 100);
    cxt.lineTo(300, 140);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineJoin = 'miter';
    cxt.moveTo(20, 180);
    cxt.lineTo(300, 180);
    cxt.lineTo(300, 220);
    cxt.stroke();
}

선분 연결점의 구체적인 시공방법을 살펴보겠습니다

Tips

연귀 스타일을 사용하여 연결을 그리는 경우 선분의 포인트, miterLimit 속성을 지정할 수도 있습니다.
miterLimit: 선 너비의 절반에 대한 마이터 선 길이의 비율을 나타냅니다.

두 선분 사이의 각도가 매우 작으면 대각선의 길이가 매우 길어질 수 있으며 선 너비의 절반에 대한 비율이 사용자가 지정한 값을 초과한다는 것을 그림에서 볼 수 있습니다. miterLimit의 속성값을 지정합니다.

이때 브라우저는 선분의 ​​연결점을 경사지게 그립니다.

요약

캔버스 그리기 환경의 선분 관련 속성

Properties선분의 너비(픽셀 단위) 0이 아닌 양수 1 선분의 끝점 그리기 스타일 butt, round, squarebutt 선분 연결점 스타일bevel, round, miter miter선 너비의 절반에 대한 마이터 선의 비율0이 아닌 양수10

설명	가치	기본값	lineWidth
			라인캡
			lineJoin
			miterLimit

위 내용은 캔버스 내 선분의 끝점과 연결점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!