예제 11-3. 선으로 삼각형 그리기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 3. 13:36 |2. 도형 그리기와 채우기
* 도형 그리기 과정
- 경로(Path) 만들기
- 캔버스에 경로에 담긴 도형 모두 그리기
* stroke() 메소가 불려질 때 비로소 경로에 담긴 도형들이 캔버스에 그려진다.
beginPath() // 새로운 빈 경로를 만든다.
stroke() // 경로에 담긴 모든 도형을 순서대로 캔버스에 그린다 (외곽선만)
fill() // 경로에 담긴 모든 도형을 순서대로 색으로 채워 캔버스에 그린다 (외곽선없이)
clothPath() // 경로의 끝점과 경로의 시작점을 연결하는 직선을 추가하고 경로를 닫는다.
* 경로 만들기
1. 빈 경로를 만든다
context.beginPath(); // 빈 경로 구성
2. moveTo()로 경로에 시작점을 설정한다
context.moveTo(120,20); // (120,20)을 시작점으로 설정
3. 이 시작점에서부터 경로를 구성해 간다.
context.lineTo(20,50); // (120,20)에서 (20,50)까지의 직선을 경로에 추가
context.lineTo(150,120); // (20,50)에서 (150,120)까지의 직선을 경로에 추가
* 캔버스에 경로전체 그리기
stroke() 메소드는 context의 경로에 담긴 도형을 순서대로 모두 그린다
context.stroke(); // context의 경로 속 도형들을 캔버스에 모두 그린다
stroke() 후에도 경로는 지워지지 않고 그대로 남아 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>경로를 설명하는 예</title></head> <body> <canvas id="myCanvas" style="background-color:aliceblue" width="200" height="150"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(120, 20); // (120, 20)을 시작점으로 설정 context.lineTo(20, 50); // (120, 20)에서 (20, 50)까지의 직선을 경로에 추가 context.lineTo(150, 120); // (20, 50)에서 (150, 120)까지의 직선을 경로에 추가 context.strokeStyle = "magenta"; // 선 색 context.stroke(); // 경로에 있는 모든 도형 그리기 </script> </body> </html> | cs |
* 경로 지우기
context의 경로 안에 만들어진 도형을 모두 지우려면 다음과 같이 경로를 새로 시작하면 된다.
context.beginPath();
* 경로 닫기
경로 닫기는 closePath() 메소드를 이용하여,
현재 경로에 만들어진 도형의 끝점과 경로의 시작점을 연결하는 직선을 자동으로 경로에 추가한다.
그러고 나서 경로에 도형을 추가할 수 없도록 닫아버린디ㅏ.
context.closePath();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>경로를 설명하는 예</title></head> <body> <canvas id="myCanvas" style="background-color:aliceblue" width="200" height="150"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(120, 20); // (120, 20)을 시작점으로 설정 context.lineTo(20, 50); // (120, 20)에서 (20, 50)까지의 직선을 경로에 추가 context.lineTo(150, 120); // (20, 50)에서 (150, 120)까지의 직선을 경로에 추가 context.strokeStyle = "magenta"; // 선 색 context.closePath(); // 경로 닫기 context.stroke(); // 경로에 있는 모든 도형 그리기 </script> </body> </html> | cs |
* 선 그리기
moveTo(x,y) // 경로에 담긴 도형은 그대로 두고, 점 (x,y)를 새 시작점으로 삽입한다.
lineTo(x,y) // 경로의 끝 점에서 (x,y)까지 직선을 경로에 추가한다.
선을 그리기 위해서는 먼저 moveTo()를 이용하여 시작점을 설정하고, 여러 개의 lineTo()로 선을 연결하여 나간다.
예제 11-3. 선으로 삼각형 그리기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>선으로 삼각형 그리기</title></head> <body> <h3>선으로 삼각형 그리기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="200" height="150"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); // 빈 경로 만들기 context.moveTo(120, 20); // (120, 20)을 시작점으로 설정 context.lineTo(20, 50); // 경로에 (120, 20)에서 (20, 50)까지 직선 추가 context.lineTo(150, 120); // 경로에 (20, 50)에서 (150, 120)까지 직선 추가 context.lineTo(120, 20); // 경로에 (150, 120)에서 (120, 20)까지 직선 추가 context.strokeStyle="magenta"; // 선의 색 context.stroke(); // 경로를 캔버스에 그린다 </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 11-5. 사각형 그리기 (0) | 2017.11.03 |
|---|---|
| 예제 11-4. 원호 그리기 (0) | 2017.11.03 |
| 예제 11-2. 캔버스 그리기 맛보기 (0) | 2017.11.03 |
| 예제 11-1. <canvas> 태그로 캔버스 만들기 (0) | 2017.11.03 |
| 예제 10-12. history 객체 활용 (0) | 2017.11.03 |