예제 11-2. 캔버스 그리기 맛보기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 3. 12:11 |* 캔버스(canvas) 객체와 컨텍스트 객체
자바스크립트로 그래픽을 수행하는 과정을 간단히 알아보자.
<canvas id="myCanvas" width="300" height="150"></canvas>
- 캔버스 객체 만들기
1. <canvas> 태그를 찾아 DOM 객체를 얻어낸다. 다음은 <cansvas>를 찾는 코드이다.
var cansvas = document.getElementById("myCasvas"); // 캔버스 찾기
- 캔버스 컨텍스트 얻어내기
2. 컨버스 객체로 부터 그림을 그리는 도구를 얻어낸다.
이 도구를 캔버스 컨텍스트 혹은 간단히 컨텍스트라고 부른다.
컨텍스트는 다음과 같이 canvas 객체의 getContext() 메소드로 알아낸다.
var context = canvas.getContext("2d"); // 2차원 그래픽
var context = canvas.getContext("webgl") // 3차원 그래픽
getContext("2d");가 리턴한 context 객체는 2차원 그래픽에 사용되는 프로퍼티와 메소드를 가진 CanvasRenderingContext2D(컨텍스트 객체)타입의 객체이다.
* canvas 객체의 프로퍼티와 메소드
width(프로퍼티) // 캔버스의 폭. 픽셀 값. 읽기 쓰기 가능
height(프로퍼티) // 캔버스의 높이. 픽셀 값. 읽기 쓰기 가능
style(프로퍼티) // 캔버스의 CSS3 스타일 시트 객체
getcontext()(메소드) // 캔버스에 그림을 그리는 컨텍스트 객체 리턴
* 캔버스에 그리기
1 2 3 4 | context.beginPath(); context.strokeStyle = "blue"; // 선 색을 파란색으로 설정 context.rect(60,60,50,50); // 캔버스의 (60,60)에서 50X50 크기의 사각형을 그린다. context.stroke(); // 현재까지 구성된 도형을 캔버스에 그린다 | cs |
* 컨텍스트 객체의 프로퍼티
strokeStyle // 선 색
fillStyle // 채우기 색
lineWidth // 도형의 선 두께. 픽셀 단위
font // 텍스트 폰트
textAlign // 텍스트 정렬 방식
* 컨텍스트 객체의 메소드
beginPath() // 이전 경로를 모두 지우고 새로 시작한다. (경로와 관련)
closePath() // 경로의 끝과 시작점을 연결하는 선을 추가하고 경로를 닫는다. (경로와 관련)
moveTo() // 경로에 새 점을 만든다. (경로와 관련)
lineTo() // 경로의 끝 점과 연결하는 선을 추가한다 (경로와 관련)
rect() // 경로에 사각형을 추가한다 (경로와 관련)
arc() // 경로에 원호를 추가한다 (경로와 관련)
fill() // 경로에 만들어진 모든 도형(사각형과 원호)을 외곽선 없이 내부만 색으로 채워 캔버스를 그린다 (경로에 있는 도형 캔버스 그리기)
stroke() // 경로에 담겨 있는 모든 도형을 외곽선만 캔버스에 그린다 (경로에 있는 도형 캔버스 그리기)
clearRect() // 캔버스에서 사각형 영역을 채운다 (캔버스에 바로 그리기)
fillRect() // 캔버스에 외곽선 없이 사각형 영역을 색으로 바로 칠한다 (캔버스에 바로 그리기)
strokeRect() // 사각형을 경로에 추가하지 않고 캔버스에 바로 그린다 (캔버스에 바로 그리기)
strokeText() // 텍스트(문자열)를 캔버스에 바로 그린다 (캔버스에 바로 그리기)
drawImage() // 이미지를 캔버스에 바로 그린다 (캔버스에 바로 그리기)
* 캔버스 그리기의 2가지 유형
- 첫 번째 방법은 beginPath()를 호출하여 빈 경로를 만들고, 경로(Path)에 먼저 선,원,사각형 등의 도형을 모아 놓고 한 번에 캔버스에 그림을 그리는 방법이다.
- 두 번째 방법은 경로에 담지 않고 바로 캔버스에 그리는 방법이다.
* 캔버스의 크기 및 스타일 제어
- 캔버스의 크기, canvas의 width와 height 프로퍼티
이 예시는 자바스크립트 코드가 canvas 객체를 통해 <cansvas> 태그에 작성된 캔버스의 크기를 알아내는 사례이다.
1 2 3 4 5 6 7 8 | <canvas id="myCanvas" width="300" height="150"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var width = canvas.width; var height = canvas.height; alert("캔버스는 " + width + "x" + height); </script> | cs |
또한 canvas 객체의 width, height 프로퍼티 값을 변경하면 캔버스의 크기를 동적으로 바꿀 수도 있다.
canvas.width = 100; // 캔버스의 폭을 100픽셀로 변경
* 캔버스의 스타일 제어
canvas 객체의 style 프로퍼티를 통해 캔버스의 배경색이나 스타일을 제어할 수 있다.
canvas.style.backgroundColor = "yellowgreen";
* 캔버스의 그래픽 좌표
캔버스의 왼쪽 상단 모서리가 (0,0)이고, 오른쪽으로 x축 값이 증가하여, 아래쪽으로 y축 값이 증가한다.
* 캔버스의 그래픽 기능
- 도형 그리기와 칠하기
- 글자 그리기
- 이미지 그리기
- 이미지 변환
- 클리핑
예제 11-2. 캔버스 그리기 맛보기
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>캔버스 그리기 맛보기</title></head> <body> <h3>캔버스 그리기 맛보기</h3> <hr> <canvas id="myCanvas" style="background-color:aliceblue" width="250" height="150"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // 파란선으로 사각형 그리기 context.beginPath(); // 빈 경로 만들기 context.strokeStyle = "blue"; // 선 색 설정 context.rect(30, 30, 50, 50); // (30,30)에서 50x50 크기 사각형을 경로에 삽입 context.stroke(); // 경로에 있는 모든 도형의 외곽선 그리기 // violet 색으로 채운 사각형 그리기 context.beginPath(); // 빈 경로 만들기 context.fillStyle = "violet"; // 채우기 색 context.rect(60, 60, 50, 50); // (60,60)에서 50x50 크기 사각형을 경로에 삽입 context.fill(); // 경로에 있는 모든 도형의 내부만 채워 그리기 // green 색으로 텍스트 내부만 그리기 context.font = "20px Gothic"; context.fillStyle = "green"; // 채우기 색 context.fillText("Text in Canvas", 100, 50); // 텍스트를 경로에 넣지 않고 바로 그리기 </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 11-4. 원호 그리기 (0) | 2017.11.03 |
|---|---|
| 예제 11-3. 선으로 삼각형 그리기 (0) | 2017.11.03 |
| 예제 11-1. <canvas> 태그로 캔버스 만들기 (0) | 2017.11.03 |
| 예제 10-12. history 객체 활용 (0) | 2017.11.03 |
| 예제 10-11. 스크린 장치ㅔ 관한 정보 출력 (0) | 2017.11.03 |