Canvas 사각형, 원 function
1
2
3
4
// app.js
const ctx = canvas.getContext("2d");
ctx.fullRec(40, 40, 100, 100);
ctx.fullRec()함수는 shortcut 이다.ctx.rec()+ctx.fill()함수가 합쳐졌다.
ctx.rec() 함수를 분리해보기
1
2
3
4
5
6
7
8
9
10
11
// 시작점을 알려준다. 원래 pencil 은 (0,0) 이 시작점. 연필을 옮기는 함수라고 생각한다.
ctx.moveTo(40, 40);
// 연필을 옮기면서 현재위치부터 해당지점까지 라인을 그려준다.
ctx.lineTo(140, 40);
ctx.lineTo(140, 140);
ctx.lineTo(40, 140);
ctx.lineTo(40, 40);
ctx.stroke();
ctx.fill();
ctx.arc()
- 원을 그리는 함수
1
2
3
4
ctx.arc(x, y, r, start angle, end angle)
ctx.arc(275, 100 , 16, 0 , 2 * Math.PI) -> 완전한 원