예제 11-6. 선의 색과 굵기. 예제 11-7. 칠하기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 3. 15:56 |* beginPath()와 closePath()
경로는 beginPath() 이후 다음 beginPath()가 호출될 때까지 이어진다.
stroke()는 경로에 있는 도형들을 모두 그리며 stroke() 후에도 경로가 사라지지 않는다.
closePath()는 경로의 끝점에서 moveTo()로 설정된 시작점까지 직선을 경로에 추가하여 닫힌 도형을 되게 한다.
* 캔버스 지우기
캔버스에 그려진 그래픽을 모두 지우고자 하면 다음과 같이 하면 된다.
context.clearRect(0, 0, canvas.width, canvas.height);
하지만 이 코드가 context에 만들어진 경로까지 지우는 것은 아니다.
경로까지 모두 지우려면 다음 코드를 추가적으로 실행해야 한다.
context.beginPath();
* 도형 꾸미기
- 색
strokeStyle 프로퍼티를 이용하면 선의 색을 지정할 수 있다.
context.strokeStyle = "blue"; or "#0000FF"; or "rgb(0,0,255)";
채우기 색은 fillstyle 프로퍼티를 이용하여 fill(), fillRect(), fillText()에 활용된다.
context.fillStyle = "red;"
- 선 굵기
lineWidth 프로퍼티를 이용하면 직선, 원호, 사각형, 곡선의 선 굵기를 지정할 수 있다.
context.lineWidth = 20; // 선 굵기를 20픽셀로 지정
예제 11-6. 선의 색과 굵기
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 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>선의 색과 굵기</title></head> <body> <h3>선의 색과 굵기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="180" height="300"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // 1 픽셀의 blue 직선 그리기 context.beginPath(); context.moveTo(20, 20); context.lineTo(150, 50); context.strokeStyle = "blue"; context.stroke(); // 1 픽셀의 blue 직선 그리기 // 10 픽셀 yellowgreen 사각형 그리기 context.beginPath(); context.rect(20, 80, 120, 50); context.lineWidth = 10; // 선 굵기 10픽셀 context.strokeStyle = "yellowgreen"; // 선 색 context.stroke(); // 20 픽셀의 violet 색 원호 그리기 context.beginPath(); context.arc(80, 220, 50, 0, 1.5*Math.PI, false); context.lineWidth = 20; // 선 굵기 20픽셀 context.strokeStyle = "violet"; // 선 색 context.stroke(); </script> </body> </html> | cs |
* 칠하기
도형의 내부를 색으로 칠하는 기능은 다음 3가지이다.
1. 원호 내부 칠하기
2. 사각형 내부 칠하기
3. 텍스트 내부 칠하기
- fillStyle 프로퍼티
원호나 사각형, 텍스트의 내부를 칠할 색은 fillStyle 프로퍼티에 지정한다.
context.fillStyle = "violet"; // violet을 칠하는 색으로 지정
- fillRect()로 채운 사각형 그리기
fillRect()은 경로에 넣지 않고 fillStyle에 주어진 색으로 사각형을 캔버스에 바로 채워 그린다.
다음은 (20,20)에서 100 X 100 크기의 외곽선 없는 사각형을 violet 색으로 칠하는 코드이다.
- fill()로 경로에 만들어진 닫힌 도형 내부 칠하기
fill()은 경로에 담긴 닫힌 도형의 내부만 칠하는 메소드이다.
다음은 사각형의 내부는 violet으로, 외곽선은 gray 색으로 그리는 코드이다.
1 2 3 4 5 6 7 | context.beginPath(); context.fillStyle = "violet"; context.rect(20,20,100,100); // 경로에 사각형 삽입 context.fill(); // 경로내 사각형 내부 칠하기 context.strokeStyle = "grey"; context.lineWidth = 10; context.stroke(); // 경로내 사각형의 외곽선 그리기 | cs |
* fill()로 원호 내부 칠하기
fill()은 경로 내 닫힌 영역(도형들)의 내부를 칠하는 메소드이므로 fill()을 이용하여 원호의 내부를 칠하려면 닫힌 원호를 만들어야 한다. 원호 양 끝점을 중심과 잇는 2개의 직선을 추가해야 닫힌 원호가 만들어 진다.
1 2 3 4 5 6 | context.beginPath(); context.moveTo(x,y); // 원호의 중심(x,y)을 경로의 시작점으로 context.arc(x, y, radius, 0, 1.5 * Math.PI); // arc()의 실행 결과 경로의 시작점 (x,y)에서 원호의 시작점(0도 위치) 까지의 직선 자동 추가 context.closePath(); // 원호의 끝점(270도)에서 경로 시작점(x,y)까지의 직선 자동추가 context.fillStyle = "yellowgreen"; context.fill(); // 경로에 있는 닫힌 원호 내부 칠하기 | cs |
예제 11-7. 칠하기
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>채운 사각형과 원호 그리기</title></head> <body> <h3>채운 사각형과 원호 그리기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="180" height="420"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // fillRect()로 외곽선 없이 색으로 채운 사각형 그리기 context.fillStyle = "violet"; context.fillRect(20, 20, 100, 100); // 채운 사각형 그리기 // fill()로 사각형 내부 칠하기 context.beginPath(); context.rect(20, 150, 100, 100); // 경로에 사각형 삽입 context.fillStyle = "violet"; context.fill(); // 사각형 내부 칠하기 // 사각형 외곽선 그리기 context.strokeStyle = "gray"; context.lineWidth = 10; context.stroke(); // 사각형 외곽선 그리기 // fill()로 원호 내부 칠하기 context.beginPath(); context.moveTo(80, 340); // 원호의 중심을 시작점으로 설정 context.arc(80, 340, 50, 0, 1.5*Math.PI); // 경로에 원호 삽입 context.closePath(); // 원호의 끝점과 경로 시작점(원호중심)을 연결하는 직선 자동 추가 context.fillStyle = "yellowgreen"; context.fill(); // 원호 내부 칠하기 // 원호 외곽선 그리기 context.strokeStyle = "gray"; context.lineWidth = 20; context.stroke(); // 원호 외곽선 그리기 </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 11-9. 캔버스의 (20,20)에서 100 X 200 크기로 변형하여 이미지 그리기. 예제 11-10. 캔버스에 꽉 차게 이미지 그리기 (0) | 2017.11.04 |
|---|---|
| 예제 11-8. 텍스트 그리기 (0) | 2017.11.03 |
| 예제 11-5. 사각형 그리기 (0) | 2017.11.03 |
| 예제 11-4. 원호 그리기 (0) | 2017.11.03 |
| 예제 11-3. 선으로 삼각형 그리기 (0) | 2017.11.03 |