[js] canvas 에 도형그리기

1. 직사각형 그리기

 

rect(x, y, width, height)

• 좌측 상단이 (x, y)이고 폭과 높이가 width와 height인 직사각형을 그립니다.

 

fillRect(x, y, width, height)

• 색칠된 직사각형을 그립니다.

 

strokeRect(x, y, width, height)

• 직사각형 윤곽선을 그립니다.

 

clearRect(x, y, width, height)

• 특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.

 

See the Pen canvas-Rect by mk (@kmeijing) on CodePen.

 

 

 

2. 삼각형 그리기

 

moveTo(x, y) 

• 펜을  x와 y로 지정된 좌표로 옮깁니다.

 

lineTo(x, y) 

• 현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.

 

 

 

See the Pen canvas-삼각형그리기 by mk (@kmeijing) on CodePen.

 

 

3. 호 그리기

 

arc(x, y, radius, startAngle, endAngle, anticlockwise)

• (x, y) 위치에 원점을 두면서, 반지름 r을 가지고,  startAngle에서 시작하여 endAngle에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.
• anticlockwise: false(시계방향) / true(반시계방향)

 

arcTo(x1, y1, x2, y2, radius)

• 주어진 제어점들과 반지름으로 호를 그리고,  이전 점과 직선으로 연결합니다.

 

arc 함수에서 각도는 각이 아닌 라디안 값을 사용합니다.

각도를 라디안으로 바꾸는 자바스크립트(JavaScript) 코드: radians = (Math.PI/180)*degrees

 

See the Pen canvas-호 그리기 by mk (@kmeijing) on CodePen.

 

 

 

4. 베지어(Bezier) 곡선과 이차(Quadratic ) 곡선

 

quadraticCurveTo(cp1x, cp1y, x, y)

• cp1x 및 cp1y로 지정된 제어점을 사용하여 현재 펜의 위치에서 x와 y로 지정된 끝점까지 이차 베지어 곡선을 그립니다.

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

• (cp1x, cp1y) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 x 및 y로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.

 

▶ 이차곡선 예제

See the Pen canvas-곡선 by mk (@kmeijing) on CodePen.

 

▶ 베지어 곡선 예제

See the Pen canvas-곡선2 by mk (@kmeijing) on CodePen.

 

 

---

 

 

5. 조합하기

See the Pen canvas-collaboration by mk (@kmeijing) on CodePen.