JS로 그림 그리기 rect/fill/fillRect/beginPath/fillStyle/moveTo/lineTo/arc 함수

rect : 사각형을 선으로 그리는 함수.

위 함수에 필요한 argument로는 순서대로 x좌표, y좌표, 원하는 x선 길이, 원하는 y선 길이

 

fill : 선으로 만들어진 영역(도형)을 색(기본 black)으로 채우는 함수

 

fillRect : 선과 채우기 함수 rect,fill을 한번에 할 수 있게 한번에 채워진 도형을 그리는 함수.

필요한 argument는 시작할 x좌표,y좌표 , 채울만큼의 x좌표, y좌표 

 

beginPath : 새로운 색/스타일을 입히고 싶을때 path를 새로 지정해주기 위해 호출하는 함수 

 

fillStyle : 색으로 채울때 원하는 색을 입력

 

moveTo: 마우스 커서의 위치를 다시 입력하고 싶을때 사용. 

위 함수에 필요한 argument로는 순서대로 이동하고 싶은 x좌표 위치 (숫자), 이동하고 싶은 y좌표 위치 (숫자)

 

lineTo: moveTo를 통해 움직인 마우스 커서에서 선을 그을때 사용 

위 함수에 필요한 argument로는 순서대로 (선이 그어질) x좌표, (선이 그어질)  y좌표

 

arc : 원을 그리고 싶을때 사용하는 함수.

위 함수에 필요한 argument로는 순서대로 x좌표, y좌표, 반지름, 원의 시작 위치 (기본적으로 0 입력), 원 모양이 되길 원하는 길이 (기본적인 원을 그리기 위해서는 2 * Math.PI입력)

* 그 이유는 아래의 그림 참고

0에서 원을 시작하고 2*Math.PI(원주, 무사히 원 그리기를 마치기 위해)를 해야하는 이유

 

코드 예시 

먼저 캔버스를 js 파일에서 설정해줘야 한다.

사람 상체 만들기 예시

html과 js가 연결되어 있다면 다음과 같이 보여짐

 

 

코드 참고 깃허브 링크 https://github.com/yeonhyeeun/meme-maker