캔버스 내 선분의 끝점과 연결점에 대한 자세한 설명-H5 튜토리얼-php.cn

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

零下一度

풀어 주다： 2017-07-18 09:35:44

원래의

2153명이 탐색했습니다.

캔버스에서 선분은 경로 유형이기도 하며 이를 선형 경로라고 합니다. 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();
}

로그인 후 복사