경로 그리기

CODEDRAGON Development/Web, WWW

반응형

 

 

경로 그리기

메소드

설명

beginPath()

·       선의 경로 시작

moveTo(x, y)

·       시작위치를 변경하는 메소드

·       지정된 좌표로부터 시작되는 서브패스를 새롭게 만듭니다.

lineTo(x, y)

·       서브패스의 마지막 위치에서 지정된 좌표로 직선을 추가합니다.

closePath()

·       경로 종료

·       도형의 다 그리지 못한 부분을 선을 이어 닫아줍니다.

stroke()

·       경로 테두리 그리기

fill()

·       도형 채우기

 

 

 

context.moveTo(10, 10);

//화면의 좌측 상단으로 부터 가로 및 세로로 10픽셀 떨어진 곳부터 붓의 시작위치가 변경되는 것을 확인할 수 있습니다.

context.lineTo(25, 20);

//가로로 25픽셀, 세로로 20픽셀 떨어진 곳에 붓의 끝 위치가 표시됩니다.