HTML5 캔버스 - 경로를 사용하여 라인을 그리는 예_html5 튜토리얼 기술

원본:
http://www.lifelaf.com/blog/?p=371
이 기사는 Steve Fulton 및 Jeff Fulton HTML5 Canvas, 2장, "경로 사용"에서 번역되었습니다. to Create Lines ”

HTML5 Canvas의 경우 "path"를 사용하여 그래픽을 그릴 수 있습니다. 경로는 단순히 일련의 점과 이 점을 연결하는 선입니다. 모든 캔버스 컨텍스트에는 하나의 "현재 경로"만 있으며 context.save()가 호출되면 "현재 경로"는 저장되지 않습니다.

경로의 시작과 끝

beginPath()를 호출하여 경로를 시작하고, closePath()를 호출하면 경로가 종료됩니다. 경로의 점을 연결하면 해당 연결이 "하위 경로"를 형성합니다. "하위 경로"의 마지막 지점이 자체의 첫 번째 지점에 연결된 경우 "하위 경로"가 "닫힌" 것으로 간주됩니다.

선 그리기

가장 기본적인 경로 작업은 moveTo() 및 lineTo() 명령을 반복적으로 호출하는 것으로 구성됩니다. 예를 들어 다음 예시는

코드 복사

코드는 다음과 같습니다.

function drawScreen() {
context.StrokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square'
context.beginPath(); context.moveTo(20, 0);
context.lineTo(100, 0);
context.strok()
context.closePath(); 🎜> 위의 예에서는 너비가 10픽셀인 가로 선분을 그리는 동시에 lineCap 및 스트로크 스타일 속성도 설정했습니다. 다음은 일반적으로 사용되는 속성 목록입니다.

lineCap
lineCap은 Canvas에서 선분의 양쪽 끝 스타일을 정의하며 다음 세 가지 값 중 하나로 설정할 수 있습니다.

엉덩이. 기본값은 선분의 양쪽 끝에 직선 모서리를 추가합니다.
둥글게. 와이어 세그먼트의 각 끝에 반원형 와이어 캡을 추가합니다. 와이어 캡의 직경은 와이어 세그먼트의 너비와 같습니다.
광장. 와이어 세그먼트의 양쪽 끝에 사각형 와이어 캡을 추가합니다. 와이어 캡의 측면 길이는 선분의 ​​너비와 같습니다.
lineJoin
lineJoin은 두 선분의 교차점에서 모서리 스타일을 정의합니다. 다음은 세 가지 선택 값입니다:

miter. 기본값은 날카로운 모서리를 생성합니다. miterLimit 속성을 설정하여 교두의 길이를 제한할 수 있습니다. miterLimit는 선 너비에 대한 교두 길이 비율의 최대값이고 기본값은 10입니다.
베벨. 경사를 만듭니다.
둥글게. 둥근 모서리를 만듭니다.
lineWidth
lineWidth는 선의 두께를 정의하며 기본값은 1.0입니다.

스트로크 스타일
스트로크 스타일은 선을 렌더링하는 데 사용되는 색상 및 기타 스타일을 정의합니다.


번역 참고:
lineJoin이 마이터로 설정되었지만 날카로운 모서리의 길이가 miterLimit 제한을 초과하면 캔버스에 "베벨" 코너 효과가 표시됩니다.