[JavaScript] canvas 요소의 모든 것 #1 - translate / rotate / lineWidth / strokeStyle / lineCap / lineJoin / beginPath / moveTo / lineTo / stroke / closePath

canvas 요소의 모든 것! #1

---

오늘은 canvas 기초를 알아봅시다!

1. [JavaScript] canvas 요소의 모든 것 #1 - translate / rotate / lineWidth / strokeStyle / lineCap / lineJoin / beginPath / moveTo / lineTo / stroke / closePath 보러가기
2. [JavaScript] canvas 요소의 모든 것 #2 - 이미지 그리기 / 커서로 이미지 조작하기 / drawImage / clearRect 보러가기
3. [JavaScript] canvas 요소의 모든 것 #3 - 이미지 회전 시키기 / save / restore / rotate / translate 보러가기

---

canvas 요소를 사용하면 웹페이지에 그래픽을 그릴 수 있습니다.

<canvas id="myCanvas" width="500" height="500"></canvas>

자바스크립트에서 canvas를 조작하기 위해 html 영역에서 canvas를 만들어줍니다.

---

//canvas의 참조값 얻어오기 
let canvas = document.querySelector("#myCanvas"); 
//canvas에 그림을 그릴 수 있는 도구(context)의 참조값 얻어오기 
let context = canvas.getContext("2d");

자바스크립트에서 canvas에서 그림을 그릴 수 있는 도구(context)의 참조값을 얻어옵니다.

---

context를 얻어왔으니 자바스크립트에서 canvas를 조작할 수 있습니다.

참고로 html에서의 좌표는 그림과 같은 좌표체계를 따릅니다.

---

1. context.translate(x,y)

context는 canvas의 먹지라고 생각하시면 이해가 쉽습니다. context.translate(100,100) 메소드를 사용하면 그림과 같이 context 먹지가 100,100만큼 이동합니다. 

---

2. context.rotate()

context.rotate(1)

context.rotate(angle)는 context를 angle만큼 회전시켜줍니다.

---

3. context.lineWidth

context.lineWidth=10;

선의 굵기를 나타냅니다.

---

4. context.strokeStyle

context.strokeStyle="#00ff00";

선의 색상을 나타냅니다.

---

5. context.lineCap

context.lineCap="round";

선의 시작과 끝을 둥글게 해줍니다.

---

6. context.lineJoin

context.lineJoin = "round";

선의 교차점을 둥글게 해줍니다.

---

7. context.beginPath()

context.beginPath();

도형 그리기를 시작합니다.

---

8. context.closePath()

context.closePath();

도형 그리기를 마칩니다.

---

9. context.moveTo(x,y)

context.moveTo(100,100);

도형을 그릴 시작점을 지정합니다.

---

10. context.lineTo(x,y)

context.lineTo(200,200);

선이 끝나는 좌표를 설정합니다. lineTo() 함수를 연속적으로 사용할 때의 시작 위치는 이전 선 그리기가 끝난 위치로 자동 설정됩니다.

 

---

11. context.stroke()

context.stroke();

선을 그리기 시작합니다.

 

---

적용 코드

 

See the Pen Untitled by Lee-YuGyeong (@lee-yugyeong) on CodePen.