댓글 : "경로"를 사용하여 그래픽을 그릴 수 있습니다. 경로는 단순히 일련의 포인트 이며이 점을 연결하는 선입니다. 모든 캔버스 컨텍스트는 하나의 "현재 경로"만있게되며 Context.save ()가 호출되면 "현재 경로"는 저장되지 않습니다.
원래의:? P = 371
이 기사는 Steve Fulton & Jeff Fulton HTML5 캔버스, 2 장, 경로를 사용하여 라인을 만들기 위해 번역되었습니다.
html5 캔버스의 경우 경로를 사용하여 그래프를 그릴 수 있습니다. 경로는 단순히 일련의 포인트 이며이 점을 연결하는 선입니다. 모든 캔버스 컨텍스트에는 현재 경로가 하나 뿐이며 Context.Save () 호출되면 현재 경로는 저장되지 않습니다.
경로의 시작과 끝
Calling StartPath ()을 통화하면 경로를 시작할 수 있으며 ClosePath () 호출은 경로를 종료합니다. 경로의 지점을 연결하면이 연결이 서브 경로를 형성합니다. SubPath의 마지막 지점이 첫 번째 지점에 연결되면 SubPath가 닫히는 것을 고려합니다.
라인 드로잉
가장 기본적인 경로 조작은 moveto () 및 lineto () 명령에 대한 반복 호출로 구성됩니다. 예를 들어, 다음 예는 다음과 같습니다.
함수 drawscreen () {
context.strokestyle = "black";
context.linewidth = 10;
context.linecap = 'square';
context.beginpath ();
context.moveto (20, 0);
context.lineto (100, 0);
Context.Stroke ();
context.closepath ();
}
위의 예에서, 우리는 폭이 10 픽셀의 수평선 세그먼트를 묘사합니다. 동시에, 우리는 또한 Linecap 및 Strokestyle 속성을 설정했습니다. 다음은 일반적으로 사용되는 일부 속성 목록입니다.
Linecap
Linecap은 캔버스에서 선 세그먼트의 양쪽 끝에서 스타일을 정의하고 다음 세 가지 값 중 하나로 설정할 수 있습니다.
대상. 기본값; 라인 세그먼트의 양쪽 끝에 직선 모서리를 추가하십시오.
둥근. 라인 세그먼트의 각 끝에 반원형 라인 캡을 추가하십시오. 라인 캡의 직경은 라인 세그먼트의 너비와 같습니다.
정사각형. 라인 세그먼트의 양쪽 끝에 정사각형 라인 캡을 추가하십시오. 라인 캡의 길이는 라인 세그먼트의 너비와 같습니다.
LineJoin
LineJoin은 두 개의 라인 세그먼트의 교차점에서 코너 패턴을 정의합니다. 다음은 세 가지 선택적 값입니다.
연귀. 기본; 날카로운 코너를 만듭니다. miterlimit 속성을 설정하여 날카로운 각도의 길이를 제한 할 수 있습니다. MINTERLIMIT는 선명한 각도 길이와 선 너비의 최대 비율이며 기본값은 10입니다.
사각. 베벨을 만듭니다.
둥근. 둥근 코너를 만듭니다.
선폭
linewidth는 선의 두께를 정의하고 기본값은 1.0입니다.
뇌졸중
Strokestyle은 선을 렌더링하는 데 사용되는 색상과 같은 스타일을 정의합니다.
번역가의 노트 : LineJoin이 Miter로 설정되지만 날카로운 코너 길이가 MiterLimit의 한계를 초과하면 캔버스가 베벨 코너 효과를 표시합니다.