예제 11-8. 텍스트 그리기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 3. 16:43 |* 텍스트 그리기
- 텍스트의 외곽선만 그리기 : strokeText();
- 외곽선 없이 텍스트 내부 채워 그리기 : fillText();
1 2 3 4 5 | strokeText(text, x, y, maxWidth) fillText(text, x, y, maxWidth) text : 출력하고자 하는 문자열 텍스트 x, y : 텍스트가 출력되는 시작 점 (x, y) maxWidth : 텍스트가 출력되는 최대 폭. text가 이 값보다 크면 자동으로 다른 폰트로 대체됨 | cs |
strokeText()는 strokeStyle 색으로 (x,y) 위치에 text의 외곽선만 그리며,
fillText()는 외곽선없이 텍스트 내부를 fillStyle 색으로 칠한다.
* 텍스트 외곽선 그리기
strokeText()는 컨텍스트의 strokeStyle과 lineWidth에 지정된 값으로 텍스트의 외곽선을 그린다.
다음 코드는 (30,100) 위치에 "Javascript" 외곽선을 1픽셀 blue 색으로 그린다
1 2 3 | context.strokeStyle = "blue"; // 외곽선 색 context.lineWidth = 1; // 외곽선 굵기 1 픽셀 context.strokeText("Javascript", 30, 100); | cs |
* 텍스트 채워 그리기
fillText()는 strokeStyle과 lineWidth를 무시하고 fillStyle 값만 반영하여 텍스트 내부를 채워 그린다.
* 폰트
텍스트의 폰트는 font 프로퍼티로 지정하며 디폴트는 10px의 sans-serif이다.
font 프로퍼티에는 CSS3 스타일 시트와 동일한 문법이 사용된다.
1 2 3 | context.font = "20px arial"; // 20픽셀의 보통 스타일, arial 서체 context.font = "italic 20px arial"; // 20픽셀의 이탤릭 스타일, arial 서체 | cs |
* 정렬
textAlign 프로퍼티에 "left"(디폴트), "right", "center", "start", "end" 중 한 값을 지정하여 텍스트의 출력 위치를 지정할 수 있다.
1 2 | context.textAlign = "right"; // 오른쪽정렬 context.strokeText("Javascript",100,10); // 정렬의 기준점 (100,10) | cs |
예제 11-8. 텍스트 그리기
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>텍스트 그리기</title></head> <body> <h3>텍스트 그리기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="500" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.strokeStyle = "blue"; // font 프로퍼티 활용 for(var i=0; i<4; i++) { context.font = (10 + i*10) + "px forte"; context.strokeText("Javascript 재밌다.", 10, 30+i*50); } // 텍스트 외곽선 그리기 context.font = "italic 50px forte"; context.strokeStyle = "magenta"; context.lineWidth = 3; context.textAlign = "left"; context.strokeText("Javascript 재밌다.", 50, 250); // 텍스트 채워 그리기 context.fillStyle = "green"; context.textAlign = "right"; context.fillText("Javascript 재밌다.", 490, 300); </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 11-11. 마우스 드래깅으로 캔버스에 그림 그리기 (2) | 2017.11.04 |
|---|---|
| 예제 11-9. 캔버스의 (20,20)에서 100 X 200 크기로 변형하여 이미지 그리기. 예제 11-10. 캔버스에 꽉 차게 이미지 그리기 (0) | 2017.11.04 |
| 예제 11-6. 선의 색과 굵기. 예제 11-7. 칠하기 (0) | 2017.11.03 |
| 예제 11-5. 사각형 그리기 (0) | 2017.11.03 |
| 예제 11-4. 원호 그리기 (0) | 2017.11.03 |