경로 그리기

 

 

경로 그리기

메소드	설명
beginPath()	·       선의 경로 시작
moveTo(x, y)	·       시작위치를 변경하는 메소드 ·       지정된 좌표로부터 시작되는 서브패스를 새롭게 만듭니다.
lineTo(x, y)	·       서브패스의 마지막 위치에서 지정된 좌표로 직선을 추가합니다.
closePath()	·       경로 종료 ·       도형의 다 그리지 못한 부분을 선을 이어 닫아줍니다.
stroke()	·       경로 테두리 그리기
fill()	·       도형 채우기

 

 

 

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

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