9장 HTML5 그래픽스

9.1 HTML5 그래픽스

컴퓨터 모니터는 픽셀(pixel) 또는 화소라고 부르는 각각 색을 나타낼 수 있는 전자 입자의 조합이다. 모니터는 종류에 따라 가로×세로가 800×600, 1280×960, 1920×1080 등의 픽셀로 이루어져 있는데 같은 모니터라도 사용자가 원하는 해상도로 조절할 수 있다. 예를 들어 800×600 픽셀의 모니터란 화면이 총 48만개의 픽셀로 구성되어 있는 것을 의미하며 이를 48만 픽셀의 해상도(resolution)를 갖는다고 부른다. 해상도가 높으면 좀 더 선명하게 화면의 사진이나 글자를 볼 수 있다. 요사이 1920×1080 해상도의 모니터가 많이 사용되는데 이는 2,073,600개의 픽셀로 이루어져 있다.

모니터에서 각각의 픽셀은 <그림 9-1>과 같은 (x,y) 좌표를 갖는다. 수학의 2차원 좌표 체계와 달리 화면 왼쪽 상단이 (0,0)이고, 우측 하단이 (xmax,ymax)로서 xmax와 ymax의 값은 모니터의 종류나 설정에 따라 다르다.

 

<그림 9.1.1> 모니터 화면의 좌표체계

모니터 화면에 그림을 그리는 오래된 방법은 픽셀을 기반으로 그리는 방법(pixel based graph)이다. 예를 들어 좌표 (0,10),(1, 10), … ,(100,10)에 위치하여 있는 픽셀에 모두 빨강 색 불을 켜면 사람 눈에는 y축에 평행한 100픽셀 길이를 갖는 빨강 선으로 보인다. 픽셀과 픽셀사이는 약간의 공간이 있을 수 있는데 우리 눈에는 잘 구분되지 않아 직선으로 보이게 된다. 이와 같은 방법으로 곡선, 원, 문자 등을 픽셀 기반으로 그림을 그릴 수 있는데 포토삽과 같은 소프트웨어가 이 방법을 사용한다. 하지만 픽셀 기반 그래프는 확대를 하면 선이 흐릿해지거나 연속된 형태가 아니게 보일 수 있는 단점이 있다.

이와는 달리 여러 개의 2차원 점을 연결하여 직선, 곡선, 원 등의 그림을 그리는 것을 벡터 기반 방법(vector based graph)이라 한다. 적은 수의 점들의 좌표(즉 벡터)로도 여러 가지 도형을 그릴 수 있으며 그림을 확대하더라도 선이 깨끗하게 표시되는 장점이 있다. 다만 복잡한 도형은 점들의 좌표가 많아져 표시하는데 시간이 걸리는 단점이 있다.

기존의 웹 개발자들은 HTML의 <img> 태그를 이용하여 사진이나 그림을 브라우저에 출력시켰으나, 그래픽 애니메이션이나 게임 등은 자바 애플릿이나 플래시와 같은 플러그인 외부 프로그램을 이용하였다. 플러그인 소프트웨어는 별도로 설치하여야 하고, 로딩에 시간이 걸리며, 특정 브라우저에서만 작동하는 단점이 있고 모바일에서는 아예 설치할 수가 없다.

HTML5에서는 위와 같은 어려움을 해결하기 위해 플러그인 소프트웨어의 설치가 필요 없이 자유롭게 그래픽을 실행할 수 <canvas> 태그를 만들어 PC나 모바일 등 HTML5 표준을 따르는 모든 브라우저에서 작동되도록 하였다. <canvas> 기능을 활용하면 브라우저의 일정한 공간에 직선, 곡선, 원, 사각형, 2차원 문자 등을 그릴 수 있고 이미지의 합성 및 변환을 쉽게 하여 애니메이션, 게임, 지도 등을 플러그인 없이 실행할 수 있다. <canvas> 태그 도입은 HTML5가 단지 웹문서를 보여주는 수준에서 응용 프로그램 제작언어로 진화하는 계기가 되었다.

하지만 <canvas> 태그를 이용하는 그래픽은 픽셀 기반 방식이어서 확대를 하면 선명하게 보이지 않는 단점이 있다. 그래서 HTML5는 벡터 기반의 그래픽을 그리는 <svg> 태그도 같이 제공한다. SVG(Scalable Vector Graphics의 약어)는 벡터를 기반으로 하여 모니터 화면에 2차원 그래픽을 그리는 명령어들로 이루어진 언어이다. 최근 스마트폰이나 태블릿이 많이 사용되면서 서로 다른 크기와 해상도의 화면에서 모두 예쁜 그래픽을 그리기 위해 SVG와 같은 벡터 기반 그래픽 그리는 방법이 많이 이용되고 있다.

요사이 해상도가 높은 모니터에서 픽셀 기반인 <canvas> 태그와  벡터 기반의 <svg> 태그를 이용하여 만들어진 그래픽은 겉으로는 크게 구별되지 않지만 <svg> 방식의 그래프가 확대했을 때 선명하게 보인다. <canvas>로 그린 그래픽은 객체가 아니어서 이벤트 핸들러가 없어 한번 그린 후 변형하려면 전체 그래픽을 다시 그려야 한다. 하지만 <svg> 그래픽은 객체이고 이벤트 핸들러를 가질 수 있어 자바스크립트를 이용하여 그래픽을 조절할 수 있다. <svg>가 장점이 많지만 게임과 같은 복잡한 그래프 형태는 시간이 많이 걸려 <canvas>를 주로 이용한다. [표 9.1.1]은 <canvas>와 <svg> 그래픽의 특징을 비교한 것이다.

9.2절에서는 <canvas> 태그를 이용하여 그래픽 그리는 방법을 설명하고 9.3절에서는 <svg> 태그를 이용하여 그래픽 그리는 방법을 설명한다. 9.4절에서는 SVG 그래픽의 응용으로 구글 지도에 대해서 설명한다.

9.2 <canvas> 그래픽스

9.2.1 캔버스 만들기

<canvas> 태그는 그림을 그릴 때 사용하는 종이와 같은 캔버스(Canvas)라는 영역을 만드는데 이를 콘테이너(container)라 부르기도 한다. 이 캔버스에 자바스크립트를 이용하여 선, 박스, 원, 텍스트, 이미지 등의 2차원 그래픽을 그리거나 애니메이션, 게임 등을 실행시킨다. 캔버스의 너비, 높이, 스타일 등을 지정하는 <canvas> 태그의 일반적인 형식은 [표 9.2.1]과 같다.

캔버스의 배경색을 지정할때는 style 프로퍼티를 다음 예와 같이 이용한다.

canvas.style.backgroundColor = “yellow”;

<그림 9.2.1>은 <canvas> 태그를 이용하여 200*100 픽셀의 사각형 캔버스를 그리고  style 속성을 이용하여 테두리를 그린 간단한 예이다. 이 캔버스 안에 그래픽을 그리게 된다. 캔버스는 자바스크립트에서 이용하기 위하여 반드시 id를 지정한다. 한 웹페이지에 여러 개의 캔버스를 만들 수도 있는데 서로 다른 크기를 가질 수도 있다.

<그림 9.2.1> <canvas>를 이용하여 캔버스 영역을 표시하는 프로그램 예

9.2.2 캔버스에 그래픽 그리기

HTML5는 <canvas> 태그를 이용하여 캔버스를 만든다. 캔버스를 이용하여 그릴 수 있는 주요 그래픽 기능은 다음과 같다.

– 선그리기와 칠하기

– 글자 그리기

– 이미지 그리기

– 이미지 변환

<canvas> 태그는 자체에 그래픽을 그리는 기능은 없고 자바스크립트의 컨텍스트(context)라는 그래픽 그리는 도구(rendering tool)를 이용한다. 즉 getContext() 메소드로서 캔버스에 그래픽을 그리는 여러 가지 도구를 갖고 있는 객체를 이용한다. 다음은 캔버스에 그래픽을 그리는 HTML5와 자바스크립트 코드의 일반적인 순서이다.

1) <canvas> 태그로 캔버스를 만든다.

예: <canvas id=”myCanvas” width=”200″ height=”100″

style=”border:1px solid black;”>

</canvas>

2) 자바스크립트에서 캔버스를 id로 찾아 캔버스 객체를 만든다.

예:  var mycanvas = document.getElementById(“myCanvas”);

3) 캔버스 객체에 getContext() 메소드를 이용하여 컨텍스트 객체를 만든다.

예:  var ctx = mycanvas.getContext(“2d”);

// getContext(“2d”)는 2차원 그래픽을 그리는 컨텍스트 도구

var ctx = mycanvas.getContext(“webg1”);

// getContext(“webg1”)는 3차원 그래픽을 그리는 컨텍스트 도구

4) 컨텍스트 객체를 이용하여 직선을 그림

예:  ctx.moveTo(0,0);       // 캔버스 메모리에서 포인터를 (0,0)로 이동

ctx.lineTo(200,100);   // 포인터를 (200,100)으로 이동하여 직선을 캔버스

메모리에 그림

ctx.stroke();          // 캔버스 메모리에 그린 그래픽을 브라우저에 출력함

그래픽은 캔버스에 직접 그리는 메소드를 이용하는 방법과, [표 9.2.5]의 beginPath() 메소드로 먼저 경로(Path)를 만들고 이 경로에 [표 9.2.5]의 그래픽 그리는 메소드를 이용하여 직선, 곡선, 원, 사각형 등을 메모리에서 모두 그린 후 stroke() 메소드로서 한 번에 캔버스에 출력하는 방법이 있다.

getContext(“2d”) 객체가 가지고 있는 그래픽을 그리는 여러 도구의 프로퍼티와 메소드는 [표 9.2.2]에서 [표 9.2.10]과 같다.

위의 표들에서 살펴본 getContext(“2d”) 객체의 여러 도구의 프로퍼티와 메소드를 이용하여 직선, 곡선, 원, 사각형 등 여러 그래픽을 그리고 선굵기, 배경색 등을 지정하여 꾸미는 방법을 살펴보자.

가. 직선과 경로의 이용

<그림 9.2.2>는 경로를 이용하여 직선을 그린 예이다. 먼저 <canvas> 태그를 이용하여 캔버스를 만든 후, 자바스크립트에서 id를 이용하여 캔버스를 찾아 캔버스 객체를 만든다.

var mycanvas = document.getElementById(“myCanvas”);

캔버스 객체 mycanvas에 getContext() 메소드를 이용하여 컨텍스트 객체 ctx를 만든다.

var ctx = mycanvas.getContext(“2d”);

이 컨텍스트 객체 ctx에 경로(Path)에 있는 여러 메소드([표 9.2.5])를 이용하여 다음과 같이 직선을 그린다.

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

beginPath()는 캔버스에 경로의 시작을 알리는 메소드이고, moveTo(0,0)은 경로 시작부분의 좌표를 (0,0)으로 하라는(그래픽을 그리는 붓의 시작 위치라고 생각하면 됨) 메소드이고 lineTo(200,100)는 현재 경로의 위치에서 좌표 (200,100)까지 직선을 그리는 메소드이다. 이 두 메소드는 직접 캔버스에 그래픽을 그리는 것은 아니고 메모리에 임시 저장하고 있는 캔버스에 그린다. stroke() 메소드는 메모리에 저장하고 있는 캔버스 그래픽을 브라우저에 한꺼번에 출력시키는 메소드이다.

<그림 9.2.2> context 객체를 이용하여 캔버스에 직선을 그리는 프로그램 예

 

나. 원호 및 선의 색

<그림 9.2.3>은 경로를 이용하여 원을 그린 예이다. 먼저 <canvas> 태그를 이용하여 캔버스를 만든 후, 자바스크립트에서 id를 이용하여 캔버스를 찾아 캔버스 객체를 만들고 컨텍스트 객체를 만드는 과정은 직선 그리는 방법과 똑같다.

이 컨텍스트 객체 ctx에 경로(Path)에 있는 여러 메소드([표 9.2.5])를 이용하여 다음과 같이 원을 그린다. 캔버스에 경로의 시작을 알리는 beginPath()와, 메모리에 저장하고 있는 캔버스 그래픽을 브라우저에 한꺼번에 출력시키는 stroke() 메소드는 직선의 경우와 같다.

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

원 및 또는 호를 그리는 메소드 arc(x,y,r,sAngle,eAngle,counterclockwise)의 매개변수 속성은 다음과 같다.

x              원 중심 x 좌표

y              원 중심 y 좌표

r              원의 반지름

sAngle          원그리기 시작 각도, 단위가 라디언이고 0이면 3시 위치

eAngle          원그리기 끝 각도, 단위가 라디언, 2 가 360도

counterclockwide (선택사항) 시계 방향(디폴트)이면 false, 시계반대 방향이면 true

<그림 9.2.3> context 객체를 이용하여 캔버스에 원을 그리는 프로그램 예

위의 예에서 원호를 그릴 때 ctx.beginPath()는 이전 경로를 지우고 빈 경로를 생성한다. 만일 이것을 생략하면 처음 그린 원과 두 번째 반원이 직선으로 연결된다.

다. 사각형, 선굵기 및 내부 색칠하기

<그림 9.2.4>는 사각형을 그리고 내부를 선형 그래디언트(linear gradient)로 색을 칠한 예이다. 먼저 <canvas> 태그를 이용하여 캔버스를 만든 후, 자바스크립트에서 id를 이용하여 캔버스를 찾아 캔버스 객체를 만들고 컨텍스트 객체를 만드는 과정은 직선 및 원을 그리는 방법과 똑같다.

이 컨텍스트 객체 ctx에 [표 9.2.2]의 createLinearGradient() 메소드와 [표 9.2.4]의 fillRect()메소드를 이용하여 사각형을 그리고 내부를 그래디언트 색으로 칠한다.

// gradient

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,”red”);

grd.addColorStop(1,”white”);

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

그래디언트 색을 지정하는 createLinearGradient(x0,y0,x1,y1) 메소드의 매개변수 속성은 다음과 같다.

x0       그래디언트 시작 지점의 x 좌표

y0       그래디언트 시작 지점의 y 좌표

x1       그래디언트 끝 지점의 x 좌표

y1       그래디언트 끝 지점의 y 좌표

그래디언트 객체에서 한 색의 영역 위치를 지정해 주는 addColorStop(stop,color) 메소드의 매개변수 속성은 다음과 같다.

stop     그래디언트 객체에서 색의 시작과 끝까지의 %, 0과 1사이의 값

color    CSS3 색 지정

이와 같이 만들어진 그래디언트 객체는 fillStyle을 이용하여 컨텍스트 객체에 넣는다.

ctx.fillStyle = grd;

경로를 이용하지 않고 직사각형을 그리는 메소드는 strokeRect(x,y,width,height)이고, 사각형 내부를 칠하는 메소드는 fillRect(x,y,width,height)로서 두 메소드의 매개변수 속성은 다음과 같다.

x       직사각형의 왼쪽 위 코너의 x 좌표

y       직사각형의 왼쪽 위 코너의 y 좌표

width    직사각형의 너비, 단위 픽셀

height   직사각형의 높이, 단위 픽셀

직선, 원호, 사각형, 곡선의 선굵기는 lineWidth 프로퍼티를 이용한다.

<그림 9.2.4> context 객체를 이용하여 캔버스에 직사각형을 그리는 프로그램 예

만일 경로를 이용하여 사각형을 만들려면 rect(x,y,width,height)를 이용한다. 매개변수 속성은 위와 같다.

경로에 있는 사각형 등의 그래픽 내부를 색칠 할 때는 fill() 메소드를 이용한다.

ctx.fillStyle = “yellow”

ctx.rect(20,20,200,100)    // 경로에 사각형 그리기

ctx.fill()         // 경로에 있는 사각형 내부 색칠하기

라. 텍스트

<그림 9.2.5>는 캔버스에 직접 세 가지 형태의 텍스트를 그린 예이다. <canvas> 태그를 이용하여 캔버스를 만든 후, 자바스크립트에서 id를 이용하여 캔버스를 찾아 캔버스 객체를 만들고 컨텍스트 객체를 만드는 과정은 직선이나 원을 그리는 방법과 똑같다.

이 컨텍스트 객체 ctx에 [표 9.2.7]의 font 프로퍼티와  fillText()와 fillStroke() 메소드)를 이용하여 캔버스에 텍스트를 그린다.

ctx.font = “30px Arial”;

ctx.fillText(“Hello World”,10,40);

ctx.strokeText(“Hello World”,10,80);

이 컨텍스트 객체 ctx에 [표 9.2.2]의 createLinearGradient() 메소드로 그래디언트 객체를 만들고 addColorStop() 메소드를 이용하여 글자에 점진적인 색이 칠해진 텍스트를 캔버스에 그린다.

var gradient = ctx.createLinearGradient(0, 0, mycanvas.width, 0);

gradient.addColorStop(“0”, “magenta”);

gradient.addColorStop(“0.5”, “blue”);

gradient.addColorStop(“1.0”, “red”);

// Fill with gradient

ctx.fillStyle = gradient;

ctx.fillText(“Big smile!”, 10, 120);

<그림 9.2.5> 캔버스에 텍스트를 그리는 프로그램 예

문자안이 채워있는 텍스트를 그리는 메소드 fillText(text,x,y,maxWidth)와 문자안이 비어있는 텍스트를 그리는 메소드 strokeText(text,x,y,maxWidth)의 매개변수 속성은 다음과 같다.

text            캔버스에 적는 문자열

x              캔버스의 텍스트 시작 x 좌표

y              캔버스의 텍스트 시작 y 좌표

maxWidth       (선택사항) 최대 허용 텍스트 너비, 단위 픽셀

font가 가질 수 있는 프로퍼티 값은 [표 9.2.12]와 같다.

텍스트의 정렬(alignment)은 textAlign 프로퍼티를 이용한다. 가질 수 있는 값은  , “left” (디폴트),”right”, “center”, “start”, “end” 로서 출력 위치를 지정한다.

ctx.textAlign = “right”

마. 이미지

<그림 9.2.6>은 태극기의 이미지를 로드한 후 버튼을 누르면 이를 캔버스에 그리는 프로그램 예이다. <img> 태그에 id를 주고 로드한 후 버튼에 onclick 이벤트 리스너를 설치하고 클릭하면 함수 myCanvas를 실행하도록 한다. <canvas> 태그를 이용하여 캔버스를 만든 후, 자바스크립트에서 id를 이용하여 캔버스를 찾아 캔버스 객체를 만들고 컨텍스트 객체를 만든다. 이 컨텍스트 객체 ctx에 drawImage() 메소드를 이용하여 캔버스에 이미지를 그린다.

function myCanvas() {

var mycanvas = document.getElementById(“myCanvas”);

var ctx = mycanvas.getContext(“2d”);

var img = document.getElementById(“korea”);

ctx.drawImage(img,10,10);

};

캔버스에 이미지를 그리는 drawImage(img,x,y)와 drawImage(img,x,y,width,height) 메소드의 매개변수 속성은 다음과 같다.

img     이미지 객체

x       캔버스에 이미지가 위치할 x 좌표

y       캔버스에 이미지가 위치할 y 좌표

width    (선택사항) 캔버스의 이미지 너비

height   (선택사항) 캔버스의 이미지 높이

<그림 9.2.6> context 객체를 이용하여 캔버스에 이미지를 그리는 프로그램 예

9.2.3 자바스크립트로 캔버스 객체 생성

<canvas> 객체도 역시 DOM 객체이므로 자바스크립트에서 생성할 수 있다. <그림 9.2.7>은 버튼을 클릭하면 document.createElement(“canvas”)로 캔버스 객체를 생성하고 컨텍스트 객체를 이용하여 캔버스에 사각형을 그린 것을 출력하는 예이다.

function myFunction() {

var x = document.createElement(“canvas”);

var ctx = x.getContext(“2d”);

ctx.fillStyle = “#FF0000”;

ctx.fillRect(20, 20, 150, 100);

document.body.appendChild(x);

}

<그림 9.2.7> 자바스크립트로 캔버스 객체를 생성하는 프로그램 예

9.2.4 캔버스 객체의 이벤트 처리

<canvas> 객체도 역시 DOM 객체이므로 이벤트 처리를 할 수 있다. <그림 9.2.8>은 캔버스에 마우스를 클릭하면 해당 좌표에 원을 그려나가는 프로그램 예이다. canvas 객체와 context 객체를 만드는 것은 앞의 프로그램과 유사하다.

var canvas = document.getElementById(“myCanvas”);

var ctx = canvas.getContext(“2d”);

캔버스 객체에 이벤트 리스너를 지정하는 명령어는 다음과 같다. 이벤트가 발생하면 이벤트 객체 e가 함수의 첫 번째 매개변수로 전달되고 drawCircle(e)라는 함수를 호출하게 된다.

canvas.addEventListener(“mousedown”,function(e) {drawCircle(e)} );

drawCircle(e) 함수는 이벤트 객체 e의 좌표를 e.offsetX, e.offsetY로 알아내고 이 좌표를 원의 중심으로하고 반지름이 5픽셀인 원을 그리는 컨텍스트를 작성한다.

function drawCircle(e) {

var x = e.offsetX;

var y = e.offsetY;

ctx.beginPath();

ctx.strokeStyle=”red”;

ctx.arc(x,y,5,0,2*Math.PI);

ctx.stroke();

}

<그림 9.2.8> 캔버스 객체의 이벤트 처리 프로그램 예

9.3 <svg> 그래픽스

HTML5는 픽셀 기반의 <canvas>와 함께 SVG(Scalable Vector Graphics) 형식의 벡터 기반 그래픽을 그리는 <svg> 태그도 같이 제공한다. SVG는 벡터를 기반으로 하여 모니터 화면에 XML이라는 형식으로 2차원 그래픽을 그리는 명령어들로 이루어진 언어이다. 적은 수의 점들 좌표(벡터)로도 여러 가지 도형을 그릴 수 있으며 해상도가 바뀌거나 도형을 확대하더라도 선이 깨끗하게 표시되는 장점이 있다. 최근 스마트폰이나 태블릿이 많이 사용되면서 서로 다른 크기와 해상도의 화면에서 모두 예쁜 그래픽을 그리기 위해 SVG와 같은 벡터 기반 그래픽 그리는 방법이 많이 이용되고 있다. 다만 복잡한 도형은 점들의 좌표가 많아져 표시하는데 시간이 걸리는 단점이 있다.

대부분의 웹 브라우저들이 SVG 명령어를 지원한다. HTML5의 <svg>…</svg> 태그는  SVG 형식으로 그래픽을 그리기 위한 캔버스를 생성한다.

SVG로 그린 이미지는 다른 jpeg 이나 gif 파일에 비해 다음과 같은 장점이 있다.

– 어느 텍스트 에디터에서도 편집이 가능

– 검색, 인덱스, 압축이 가능

– 확대 축소 가능

– 고해상도의 인쇄가 가능

– 개방되어 있는 표준 형식

– 순수한 XML 형식

9.3.1 SVG 기본 도형 그리기

SVG 태그로 형성된 캔버스 위에는 [표 9.3.1]과 같은 원, 타원, 직사각형과 함께 선, 다중선, 다각형등 기본 도형을 그릴 수 있다. 각 도형 요소의 이름과 속성을 통해 위치와 크기를 결정할 수 있다.

SVG 도형 요소들은 각 유형마다 다른 스타일을 가질 수 있는데 자주 사용되는 채우기, 색, 선의 두께 등의 속성은 [표 9.3.2]와 같다.

<그림 9.3.1>는 원을 SVG 그래픽으로 그린 예이다. SVG 이미지는 <svg> 태그로 시작하여 </svg> 로 끝나며 이미지의 너비와 높이를 width, height 속성으로 지정한다. <circle> 태그는 SVG 형식의 원을 그리는데  중심이 (cx,xy)이고 반지름이 r인 속성을 지정할 수 있다. stroke-width 속성을 이용하여 원 테두리의 두께를 지정하고 fill 속성을 이용하여 원의 내부 색을 지정한다.

<그림 9.3.1> SVG 형식의 원을 그린 예

<그림 9.3.2>는 사각형을 SVG 그래픽으로 그린 예이다. 여기서는 CSS3 스타일을 이용하여 SVG 캔버스의 크기를 300*220 픽셀로 지정하고 테두리를 1픽셀로 표시하였다. 사각형의 테두리 굵기 stroke-width, 색 stroke, 내부색도 CSS3 스타일을 이용하였다.

<style>

svg {width:300px; height:220px; border:1px solid black;}

rect {stroke-width: 4px; stroke: green; fill: yellow;}

</style>

SVG 캔버스 위에 사각형은 <rect> 태그의 시작 좌표 (40,30)를 지정하고 크기 width와 height를 지정한다.

<rect x=”40″ y=”30″ width=”200″ height=”160″ />

<그림 9.3.2> CSS3로 SVG 캔버스를 지정하고 그 위에 사각형을 그린 예

<그림 9.3.3>은 여러 가지 도형의 SVG 그래픽을 그린 예이다. 여기서는 CSS3 스타일을 이용하여 SVG 캔버스와 각 도형의 stroke, stroke-width, fill 속성을 지정하였다.

<style>

svg {width:600px; height:200px; border:1px solid black;}

circle {fill: green; stroke; black;}

ellipse {fill: blue; stroke: black;}

rect {stroke-width: 4px; stroke: black; fill: red;}

line {stroke-width: 2px; stroke: black;}

polygon {stroke-width: 4px; fill: yellow; stroke: greenk;}

</style>

SVG 캔버스 위에 그려질 도형은 <circle>은 중심 좌표와 반지름, <ellipse>는 중심좌표와 양축 길이, <rect>는 시작 좌표와 너비 및 높이, 직선 <line>은 시작좌표와 끝좌표, 삼각형을 위한 <polygon>은 점들의 좌표 등의 속성을 다음과 같이 지정한다. 사각형의 경우 <그림 9.3.1>과 달리 rx, ry 매개변수를 추가하여 네 곳의 모서리가 반지름 20px인 둥근 모서리의 사각형을 지정하였다.

<svg>

<circle  cx=”70″  cy=”100″ r=”50″ />

<ellipse cx=”180″ cy=”100″ rx=”35″ ry=”70″ />

<rect    x =”250″ y =”50″  width=”100″ height=”100″ rx=”20″ ry=”20″ />

<line    x1=”400″ y1=”50″  x2=”450″  y2=”150″ />

<polygon points=”530,50 480,150 570,150″ />)

</svg>

<그림 9.3.3> CSS3로 SVG 캔버스를 지정하고 그 위에 여러 가지 도형을 그린 예

위의 예제에서 도형의 스타일은 다음과 같이 <style> … </style> 태그 내에서 지정하였다. 이와 같은 스타일의 지정은 간단히 <svg>의 <rect> 요소에서 직접 지정할 수도 있다.

<svg>

<rect    x =”250″ y =”50″  width=”100″ height=”100″

style=”stroke-width: 4px; stroke: black; fill: red;”/>

</svg>

여러 개의 도형이 있을 경우에는 스타일에 id를 지정하여 특정 도형에만 이 스타일을 적용할 수도 있다.

<style>

rect {fill: red;}

#myrect {stroke-width: 4px; stroke: black;}

</style>

<svg>

<rect    x =”250″ y =”50″  width=”100″ height=”100″ id=”myrec” />

</svg>

SVG의 path 요소를 활용해서도 <그림 9.3.4>와 같은 도형을 그릴 수 있다. 첫 번째 도형은 절대좌표(속성명령 M 이용) (30,50)에서 시작하여 점 (150,50), (150,150), (30,150)을 직선으로 연결하는 사각형이다. 두 번째 도형은 절대좌표(속성명령 M 이용) (230,50)에서 시작하여 점 (180,150), (270,150)을 연결하는 삼각형이다. 세 번째 도형은 시작점 (310,150), 끝점 (600,15)을 연결하고 중간 제어점 (380,0), (450,80)을 베지어 곡선(속성명령 C 이용)으로 그린 도형이다.

<그림 9.3.4> SVG Path를 이용하여 그린 도형의 예

9.3.2 SVG 텍스트 그리기

SVG의 텍스트는 역시 벡터 기반 문자여서 확대/축소하여도 깨끗하게 나나탄다. SVG로 텍스트를 표시하기 위해서는 <text> … </text> 사이에 문자열이 시작되는 부분의 좌표와 문자열의 글꼴, 크기 등의 스타일을 지정하고 표시할 문자열을 적는다. <text> 태그의 주요 속성은 [표 9.3.3]과 같다.

<그림 9.3.5>는 여러 가지 SVG 텍스트를 그리는 예이다.

<그림 9.3.5> SVG 텍스트 그리기 의 예

9.3.3 SVG 도형의 그룹화와 이동

여러 개의 SVG 도형 요소는 그룹으로 묶을 수 있는데 이때 사용되는 것이 <g> … </g> 태그이다. 그룹을 지은 도형에 대해서는 한꺼번에 스타일을 지정할 수도 있고, 위치도 지정할 수 있으며, 변환을 적용하여 이동시킬 수도 있다.

<g> 태그에는 transform 속성을 지정할 수 있는데 사용할 수 있는 속성명과 그 기능은 [표 9.3.4]과 같다.

<그림 9.3.6> SVG 도형의 그룹화 예

9.4 HTML5 구글 지도

HTML5에서는 한 지역의 위도(Latitude)와 경도(Longitude)를 알면 이 지역의 구글 지도를 웹 브라우저에 보이게 할 수 있다. 위도와 경도는 구글 지도에서 한 지역을 마우스로 클릭하면 화면에 나타나서 이를 캡쳐할 수 있다. 예를 들어 서울은 넓은 지역이어서 어디를 서울로 보느냐에 따라서 위도 경도가 좀 달라질 수 있는데 서울 시청의 위도는 37°33’58.87″N  경도는126°58’40.63″E 이다.

HTML5에서 지도를 웹브라우저에 보이게 하기 위해서는 지도를 담을 컨테이너를 지정해 주어야 하는데 다음과 같이 <div> 태그를 이용한다. 이 컨테이너는 너비 400px, 높이 400px, 배경색이 노랑으로 지정되었다.

<div id=”map” style=”width:400px; height:400px; background:yellow”></div>

지도를 그리기 위해서는 지도의 속성을 지정해 주는 다음과 같은 함수가 필요하다.

function myMap() {

var mapOptions = {

center: new google.maps.LatLng(37.5, 127),

zoom: 10,

mapTypeId: google.maps.MapTypeId.HYBRID

}

var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

}

여기서 mapOptions 변수는 지도의 속성을 지정해 준다. 속성 center는 표시될 지도의 중심에 대한 위도와 경도 좌표로서 LatLng(37.5, 127)는 서울의 대략적인 좌표이다. 속성 zoom은 지도의 확대 정도를 나타내는데 확대 수준 10은 서울 및 경기 인천 지역을 넓게 볼 수 있는 수준이다. 여러 가지 수준을 실험해 보기 바란다.  변수 map은 id가 “map”인 <div> 요소에 앞에서 정의한 mapOptions 변수를 전달하여 지도를 생성한다.

구글 지도를 사용하기 위해서는 Google API Key가 필요하다. 다음 웹사이트를 접속하면 무료로 API Key를 받을 수 있다.

https://console.developers.google.com

이 사이트에 접속하여 <그림 9.4.1>과 같은 화면이 나올 때 ENABLE API 버튼을 클릭한다. <그림 9.4.2>와 같은 화면이 나오면 Google Maps JavaScript API를 선택한다. <그림 9.4.3>과 같은 New Project 생성화면에서 create를 선택하면 JavaScript API Key를 구할 수 있다. 필자는 다음과 같은 키를 구하였다.

AIzaSyA-GWrX2aF1mFYKj6pZSOmNiOP3w2cIFXI

구글 맵(Google Maps)은 지도를 불러올 때 이 키를 요구하는데 다음과 같이 지정한다.

<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap”>

</script>

<그림 9.4.1> Google API 화면

<그림 9.4.2> Google Maps API를 받기위한 화면

<그림 9.4.3> New Project 생성 화면

<그림 9.4.4> Google Maps API

EX090401.htm은 서울의 지도를 웹브라우저에 보여주는 프로그램 예이다.

<그림 9.4.5> 서울의 구글 지도 예