HTML5 그래픽 Canvas

canvas 요소

canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공한다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행한다.
따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 한다.

canvas 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.

canvas 요소의 속성

canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간이다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다.

canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 된다.

예제

<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

사각형 그리기

캔버스를 정의한 후에는 스크립트를 이용하여 canvas 요소에 그래픽을 그릴 수 있다.

다음 예제는 스크립트를 이용하여 canvas 요소에 사각형을 그리는 예제이다.

예제

context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);

위의 예제에서 사각형을 그리는 데 사용된 함수들은 다음 순서대로 인수를 전달 받는다.

1. 사각형의 왼쪽 위 꼭짓점의 x좌표
2. 사각형의 왼쪽 위 꼭짓점의 y좌표
3. 사각형의 너비
4. 사각형의 높이

사각형을 그리는데 사용하는 스크립트 함수는 다음과 같다.

선 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 선을 그리는 예제이다.

context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();

선을 그리는데 사용하는 스크립트 함수는 다음과 같다.

예제

이러한 선 그리기를 이용하면 도형을 만들 수도 있으며, 만든 도형에 색을 채울 수도 있다.

context.moveTo(0, 0);
context.lineTo(300, 200);
context.lineTo(150, 0);
context.lineTo(0, 0);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();

위의 예제에서는 우선 moveTo() 함수와 lineTo() 함수를 이용하여 선 그리기로 도형을 만든다.
그 후 fillStyle() 함수로 원하는 색상을 지정하고나서, fill() 함수를 사용하여 만든 도형에 색상을 칠하게 된다.

원 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 원을 그리는 예제이다.

예제

context.beginPath();
context.arc(150, 100, 50, 0, 2 * Math.PI);
context.stroke();

위의 예제에서 사용된 arc() 함수는 다음 순서대로 인수를 전달 받는다.

1. 원의 중심 x좌표
2. 원의 중심 y좌표
3. 원의 반지름
4. 원호를 그리기 시작할 각도
5. 원호 그리기를 마칠 각도

원을 그리는데 사용하는 스크립트 함수는 다음과 같다.

예제

이러한 원 그리기를 이용하면 원호 또한 간단히 만들 수 있다.

context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();

Math.PI는 원의 원주를 지름으로 나눈 비율(원주율) 값으로 대략 3.14159를 나타낸다.

텍스트(text) 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 텍스트를 그리는 예제이다.

예제

context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);

위의 예제에서 텍스트를 그리는 데 사용된 함수들은 다음 순서대로 인수를 전달 받는다.

1. canvas 요소에 그릴 텍스트의 내용
2. 텍스트의 왼쪽 위 꼭짓점의 x좌표
3. 텍스트의 왼쪽 위 꼭짓점의 y좌표

텍스트를 그리는데 사용하는 스크립트 함수는 다음과 같다.

그래디언트(gradient) 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 선형 그래디언트를 그리는 예제이다.

예제

var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);

위의 예제에서 사용된 createLinearGradient() 함수는 다음 순서대로 인수를 전달 받는다.

1. 선형 그래디언트가 시작하는 점의 x좌표
2. 선형 그래디언트가 시작하는 점의 y좌표
3. 선형 그래디언트가 끝나는 점의 x좌표
4. 선형 그래디언트가 끝나는 점의 y좌표

이렇게 createLinearGradient() 함수를 사용하여 선형 그래디언트를 생성한다.
이때 addColorStop() 함수를 사용하여 그래디언트에 사용될 색상을 명시할 수 있다.
또한, 이렇게 생성된 그래디언트는 fillStyle이나 strokeStyle 속성을 이용하여 그릴 수 있다.

다음 예제는 스크립트를 이용하여 canvas 요소에 원형 그래디언트를 그리는 예제이다.

예제

var gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);

위의 예제에서 사용된 createRadialGradient() 함수는 다음 순서대로 인수를 전달 받는다.

1. 원형 그래디언트가 시작하는 원의 중심 x좌표
2. 원형 그래디언트가 시작하는 원의 중심 y좌표
3. 원형 그래디언트가 시작하는 원의 반지름
4. 원형 그래디언트가 끝나는 원의 중심 x좌표
5. 원형 그래디언트가 끝나는 원의 중심 y좌표
6. 원형 그래디언트가 끝나는 원의 반지름

그래디언트(gradient)를 그리는데 사용하는 스크립트 함수는 다음과 같다.

createLinearGradient() 함수와 createRadialGradient() 함수는 익스플로러 8과 그 이전 버전에서 지원하지 않습니다.

이미지 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에 이미지를 그리는 예제이다.

예제

<p><button onclick="drawImage()">이미지 그리기</button></p>
...
<script>
    function drawImage() {
        var srcImg = document.getElementById("Monalisa");
        context.drawImage(srcImg, 10, 10);
    }
</script>

위의 예제에서 사용된 drawImage() 함수는 다음 순서대로 인수를 전달 받는다.

1. canvas 요소에 그릴 이미지의 주소
2. 이미지의 왼쪽 위 꼭짓점의 x좌표
3. 이미지의 왼쪽 위 꼭짓점의 y좌표

이미지를 그리는데 사용하는 스크립트 함수는 다음과 같다.