1. 기본적인 사용법 2. 다양한 도형 및 스타일 적용 3. SVG 4. 비디오 태그. 캔버스 태그는 HTML5 에서 새로 추가된 엘리먼트로 HTML5 스펙에서 가장 많은 부분을 차지하고 있다. 캔버스라는 개념은 웹 페이지에 그림을 그리는 개념인 캔버스 태그는 애플의.

Presentation on theme: "1. 기본적인 사용법 2. 다양한 도형 및 스타일 적용 3. SVG 4. 비디오 태그. 캔버스 태그는 HTML5 에서 새로 추가된 엘리먼트로 HTML5 스펙에서 가장 많은 부분을 차지하고 있다. 캔버스라는 개념은 웹 페이지에 그림을 그리는 개념인 캔버스 태그는 애플의."— Presentation transcript:

1 1. 기본적인 사용법 2. 다양한 도형 및 스타일 적용 3. SVG 4. 비디오 태그

2 캔버스 태그는 HTML5 에서 새로 추가된 엘리먼트로 HTML5 스펙에서 가장 많은 부분을 차지하고 있다. 캔버스라는 개념은 웹 페이지에 그림을 그리는 개념인 캔버스 태그는 애플의 맥 OS X 용 Dashboard 에서 처음 개발된 요소이다. 이후 이 기능을 Firefox 1.5 등에서 지원하기 시작하였고 현재는 webkit 기반 브라우저를 포함하여 아래 브라우저들에서 이를 지원하고 있다. Chapter 03. 캔버스

3 HTML5 에서 캔버스 태그는 기존의 HTML4 태그 중 하나인,, 등과 그 사용 방법이 동일하다. 즉, 태그로 라고 써주기만 하면 HTML 문서에 고정된 크기의 캔버 스가 삽입될 수 있다. 캔버스 태그는 기본적으로 id, width, height 속성을 갖는다. 위와 같이 정의된 캔버스 태그는 'my_canvas' 라는 id 로 웹 페이지 내에서 식별되며 가로 400px, 세로 300px 의 크기로 정의된다. 1. 기본적인 사용법

4 1.1 캔버스를 지원하지 않는 브라우저에 대처하기 현존하는 브라우저에서 HTML5 의 지원 여부를 판단하는 명확한 기준이 없다. 웹 페이지 개발자는 사용자가 사용하고 있는 브라우저가 하위버전의 브라우 저인 경우를 대비하여 HTML5 태그가 아닌 다른 태그를 사용한 웹 페이지를 작성하여 사용자에게 적절히 제공하여야 한다. 1. 기본적인 사용법

5 1.1 캔버스를 지원하지 않는 브라우저에 대처하기 DOM 객체를 사용한 폴백 컨텐츠 해당 웹 페이지가 로드된 후 DOM 객체를 사용하여 엘리먼트와 그 속성이 존재하는지 여부를 확인하여 지원 여부를 판단하는 예제이다. 1. 기본적인 사용법

6 1.1 캔버스를 지원하지 않는 브라우저에 대처하기 Modernizr 를 사용한 폴백 컨텐츠 자바스크립트 라이브러리인 Modernizr 를 사용하여 동일한 결과를 얻기 위해서는 아래와 같이 작성할 수 있다. 1. 기본적인 사용법

7 1.1 캔버스를 지원하지 않는 브라우저에 대처하기 Modernizr 라이브러리에서는 이와 같은 속성도 간단히 검증할 수 있다. 아래 와 같이 'Modernizr.canvastext' 의 값을 얻어와 폴백 컨텐츠를 작성하였다. 1. 기본적인 사용법

8 1.1 캔버스를 지원하지 않는 브라우저에 대처하기 위와 같이 구현된 폴백 컨텐츠를 DOM 객체를 이용하여 구현한다면 다음과 같이 조금은 복잡해져야 할 것이다. 1. 기본적인 사용법

9 1.2 캔버스 태그 사용하기 캔버스는 공백으로 구성된 영역에서 시작하며, 기본적으로 완전히 투명한 상태로 초기화 되며, 크기에 대한 속성을 갖는다. 캔버스는 HTML 엘리먼트의 일종이므로, id 등 그밖에 다른 엘리먼트와 동일한 공 통 속성을 갖는다. 캔버스에 그래픽을 표현하기 위해서는 다음과 같은 절차가 필요하다. 1. 'document.getElementByID()' 혹은 'getElementsByTagName()' 함수를 통해 DOM 에서 캔버스 엘리먼트를 찾는다. 2. 캔버스 객체에 'getContext()' 함수를 호출하여 그리기 객체인 컨텍스트 객체 를 얻어온다. 3. 반환받은 컨텍스트 객체를 사용하여 사각형, 원 등 그리기 함수를 호출한다. 1. 기본적인 사용법

10 1.2 캔버스 태그 사용하기 캔버스를 웹 페이지에 삽입한 예제 1. 기본적인 사용법

11 2.1 도형 그리기 도형 그리기의 가장 기본이 되는 요소는 선이다. 시작 좌표와 끝 좌표를 입력 받아 하나의 선으로 연결함으로써 간단한 선은 물론 복잡한 도형까지 그릴 수 있다. 선 그리기 함수를 사용하여 도형을 그리기 위해서는 패스 (Path) 의 개념을 이 해해야 한다. 캔버스 내에서 패스는 캔버스에 그려진 선의 집합이며, 두 개 이상의 점을 직 선 혹은 곡선으로 연결한 선을 서브패스 (SubPath) 라고 정의한다. 2. 다양한 도형 및 스타일 적용

12 2.1 도형 그리기 선 그리기를 위해 사용되는 함수 2. 다양한 도형 및 스타일 적용

13 2.1 도형 그리기 선 그리기를 위해 사용되는 속성 2. 다양한 도형 및 스타일 적용

14 2.2 삼각형 그리기 선 그리기 함수를 사용하면 세 개의 지점을 연결하는 삼각형을 그릴 수 있다. 삼각형뿐 아니라 오각형, 팔각형까지 응용할 수 있을 것이다. 앞에서 사용하지 않았던 'beginPath()' 와 'closePath()' 를 사용하여 자유롭게 선을 연결하고 여러 개의 도형을 한 화면에 그리는 방법을 살펴보도록 한다. 소스코드 150~151 페이지 참조 2. 다양한 도형 및 스타일 적용

15 2.3 사각형 그리기 앞서 선 그리기에서 사용된 함수들을 사용해도 사각형을 그리는데 문제가 없 지만, 캔버스 API 에서는 사각형을 그리기 위해 사용자에게 보다 편리한 함수 를 제공하고 있다. 다음 표는 사각형 그리기를 위해 사용되는 함수이다. 소스코드 152~155 페이지 참조 2. 다양한 도형 및 스타일 적용

16 2.4 투명도 겹치는 도형들을 보이게 할 수 있게 하기 위한 방법으로 도형에 투명도를 지 정하는 방법이 있다. 투명도를 지정하는 방법은 두 가지가 있다. 첫 번째는 'rgba()' 함수에 색상과 함께 파라미터로 투명도의 값을 전달하는 방법이고, 두 번째는 'globalAlpha' 속성을 이용하는 방법이다. rgba() 함수 사용 : context.fillStyle = 'rgba(100,0,0,[ 투명도 값 ])‘ globalAlpha 속성 사용 : context.globalAlpha=[ 투명도 값 ]; 소스코드 156 페이지 참조 2. 다양한 도형 및 스타일 적용

17 2.5 원 그리기 캔버스에서는 직선뿐만 아니라 원을 그리는 함수도 제공한다. 총 6 개의 파라 미터를 입력값으로 하는 'arc()' 함수를 이용하면 둥근 원을 그릴 수 있다. 아 래 표는 원 그리기 함수에 대한 정의이다. 파라미터로 지정되는 6 개의 값 중 앞의 3 개는 중심 좌표와 반지름 값으로 원 의 크기를 결정한다. 네 번째와 다섯 번째 파라미터인 그리기 시작, 종료 각도 는 원의 기울기를 결정하는데 단위가 라디안 (rad) 이다. 소스코드 158~161 페이지 참조 2. 다양한 도형 및 스타일 적용

18 2.6 베지어 곡선 그리기 베지어 곡선 (Bezier Curve) 은 2 개 이상의 점들을 정의하고 그 점들을 부드럽 게 연결하는 특수한 곡선이다. 캔버스에서는 베지어 곡선을 지원하기 위해 2 차 베지어 곡선을 그리는 'quadratic CurveTo()' 함수와 3 차 베지어 곡선을 그리는 'bezierCurveTo()' 함 수를 제공하고 있다. 소스코드 162~165 페이지 참조 2. 다양한 도형 및 스타일 적용

19 2.7 그라데이션 적용하기 캔버스에서는 도형에 대해 조금 더 화려하게 내부 색을 입힐 수 있는 방법이 있다. 바로 그라데이션을 적용하는 것인데, 점진적으로 도형의 색 농도를 변 하게 할 수 있으며 현재 선형 그라데이션과 원형 그라데이션에 대한 함수가 제공된다. 소스코드 166 페이지 참조 2. 다양한 도형 및 스타일 적용

20 2.8 패턴 적용하기 패턴은 반복되는 이미지를 캔버스의 도형 객체에 적용할 수 있는 속성이다. 패턴으로 활용할 이미지를 로드할 때 'Image' 객체를 사용하는데, 이 속성에 이미지 파일의 주소값을 지정하면 된다. 소스코드 168 페이지 참조 2. 다양한 도형 및 스타일 적용

21 2.9 그림자 넣기 캔버스에서는 도형과 선에 그림자 속성을 지정하기 위해 'shadowOffsetX()', 'shadowOffsetY()’ 함수를 제공한다. 원본 도형의 위치를 기준으로 그림자의 위치를 지정할 수 있으며 그림자 색 상과 흐리기를 지정할 수도 있다. 소스코드 170 페이지 참조 2. 다양한 도형 및 스타일 적용

22 2.10 이미지 삽입하기 웹 페이지 내에 이미지 파일을 삽입하기 위해서는 이미지 객체의 'src' 속성에 파일 경로를 지정해주면 된다. 그리고 캔버스에 해당 이미지를 삽입하여 보이기를 원할 때에는 'drawImage()' 함수를 사용할 수 있다. 소스코드 171~172 페이지 참조 2. 다양한 도형 및 스타일 적용

23 2.11 변형 캔버스에서는 도형의 크기 조절, 회전 이동 등의 변형 기능을 위한 함수를 제 공한다. 만약에 여러가지 변형 함수를 적용했을 경우 변형 기능을 반영하는 기준은 함수를 실행한 역순이다. 소스코드 173 페이지 참조 2. 다양한 도형 및 스타일 적용

24 2.12 합성 버스에서는 여러 개의 이미지 및 도형을 합성할 수 있는 함수 및 속성을 지원 한다. 함수는 'globalCompositeOperation()' 이 담당하고, 해당 함수의 값에 11 가지 속성값을 지정할 수 있다. 소스코드 175 페이지 참조 2. 다양한 도형 및 스타일 적용

25 2.13 텍스트 넣기 캔버스에 선과 도형을 그리는 것처럼 글자도 그릴 수 있다. 일반적인 텍스트 를 가지고 테두리만 표시할 수도 있고 크기 및 방향, 정렬 등을 조절할 수 있 는 기능이 제공된다. 소스코드 177 페이지 참조 2. 다양한 도형 및 스타일 적용

26 SVG(http://www.w3.org/Style/XSL/) 는 Scalable Vector Graphics 의 약자로 XML 을 기반으로 한 표준 벡터 그래픽 포맷이다. SVG 는 HTML5 가 논의되기 이전부터 사용되던 기술로 별도로 존재하던 기술 을 HTML5 에 포함시킨 것으로서, HTML5 에 함께 추가된 캔버스와 비슷해 보 일 수 있으나 페이지 상에 선, 곡선, 패스, 도형 등을 벡터로 표현할 수 있다는 점에서 캔버스와는 조금 다르다. SVG 를 페이지에 구현하는 방법은 두 가지가 있다. 1. SVG 파일을 객체 태그에 삽입하는 방법 2. 페이지에 직접 구현하는 방법 3. SVG

27 직접 페이지 내에 SVG 를 사용하여 도형이 회전하는 애니메이션 3. SVG

28 3.1 캔버스와의 차이점 다음은 오페라 개발자 센터 (http://dev.opera.com) 에서 캔버스와 SVG 의 장단 점을 비교한 것이다 소스코드 182~183 페이지 참조 3. SVG

29 HTML5 비디오 태그는 HTML5 초안 규격에서 소개된 마크업 언어 태그로, HTML 페이지의 동영상을 삽입하는 기능을 지원해준다. 유튜브와 같은 웹사이트에서 동영상을 삽입하는 기능이 HTML5 이전에는 각 종 서드 파티 (3rd party) 플러그인을 기반으로 하고 있었기 때문에 사용자는 각 사이트에서 필요로 하는 플러그인을 설치해야만 했다. 그러나 이제는 HTML5 의 태그를 사용하여 웹 페이지 자체에 동영상 을 삽입할 수 있다. 현재의 HTML5 초안 규격에는 비디오 태그에서 지원해야 하는 동영상 포맷 을 따로 명시해두지 않았기 때문에, 각 브라우저별로 지원 포맷이 다를 수 있 다. 4. 비디오 태그

30 4.1 HTML5 에서 지원되는 동영상 현재까지 HTML5 의 비디오 태그에서 지원하는 포맷은 Ogg, MPEG 4, WebM 의 세 가지이다. 현재 각 브라우저별로 지원하는 동영상 포맷은 다음과 같다. 4. 비디오 태그

31 4.2 기본적인 사용법 비디오 태그의 속성은 아래와 같다. 비디오 태그는 필수 속성으로 'src' 를 갖 는데, 재생할 파일 경로를 지정하고 'controls 속성으로 ' 재생 ', ' 멈춤 ' 과 같은 컨트롤들을 추가할 수 있다. 4. 비디오 태그

32 4.2 기본적인 사용법 웹 페이지에 동영상을 삽입하기 위해서는 다음과 같이 사용하면 간단히 된다. Safari 브라우저에 대체 컨텐츠를 제공하고 싶다면 다음과 같이 태 그를 사용하면 된다. 4. 비디오 태그