---

HTML5

---

자바스크립트 + 웹앱 API(HTML5 표준 함수)

탄생 배경

• 기존의 웹 환경은 매우 정적이고 주로 텍스트와 하이퍼링크로 이루어져 있었다.
• PC의 사양이나 네트워크 환경의 제약도 있었다.
• Active X, Flash 등의 사용으로 인하여 브라우저 간의 호환성 및 웹을 표준화하는데 문제가 발생하였다.
• 지난 10여년 간 이러한 여러가지 요구들을 수용하여 기존의 문제점들을 보완함으로써 많은 기능들이 추가되었다.

개념 및 특징

개념

• HTML5는 기존 텍스트와 하이퍼링크로만 표시했던 HTML에서 다양한 웹 어플리케이션으로 진화한 차세대 웹 표준 웹 프로그래밍 언어이다.
  
  HTML5는 W3C를 중심으로 하여 애플, 마이크로소프트, 구글, 모질라 등의 메이저 웹 브라우저 벤더사가 참여하고 있는 산업 표준이기도 한다.
  

특징

• 원소스 멀티 플랫폼
  

• 플러그인 불필요
  

2D / 3D 그래픽

• HTML5에서는 SVG, 캔버스, WebGL을 통해 다양한 2D/3D 그래픽 기능을 제공한다.
• WebGL은 오픈 그래픽 라이브러리인 OpenGL(OpenGL ES 2.0)에 기반한 웹 표준 그래픽 라이브러리이다.

주요 기능

웹 소켓(Websocket)

• 웹 소켓(Websocket)의 가장 큰 의미는 웹 소켓을 통해 서버와 클라이언트 간에 양방향 통신이 가능해졌다는 것이다.
• 양방향 통신을 사용하게 되면 네트워크의 부하 시간을 줄일 수 있기 때문에 성능상 매우 효율적이다.

멀티미디어

• 기존 웹 기반에서 오디오나 비디오 관련 파일을 재생하기 위해서는 반드시 Active X에 의해 플레이어를 설치해야 했었다.
• HTML5 기반에서는 별도의 플러그인 없이 오디오와 비디오를 재생할 수 있다.

웹 스토리지

• 쿠키의 단점을 보완하고 데이터를 관리하기 위한 새로운 웹 스토리지 매커니즘이 HTML5 표준에 추가되었다.
• 서버로 전송이 되지 않으므로 쿠키에 비해 보안성이 더 높고, 개수나 용량 제한이 없으므로 쿠키에 비해 다량의 데이터를 저장할 수 있다.

위치정보 서비스

• HTML5에서는 기기에서 위치를 탐색하는 GPS와 같은 장치와 연동되는 Geolocation API가 제공된다.
• 구글 지도와 연동하여 현재의 나의 위치나 찾고자 하는 위치 정보 등을 검색할 수 있다.

---

캔버스

---

캔버스의 기본

캔버스란

• 사전적 의미로는 '유호를 그릴 때 쓰는 천'인데, 웹페이지에서 캔버스라는 용어가 사용된다면, 웹페이지 상에 그림을 그릴 수 있도록 기능을 제공한다는 뜻이다.

<canvas> 엘리먼트

• <canvas> 엘리먼트를 구성할 수 있어야 한다.
  

• 이와 같이 엘리먼트를 페이지에 추가하는 의미는 내가 웹페이지 상에 그림을 그리며 마음껏 꿈을 펼칠 수 있는 공간을 만들겠다는 것이다.
  

자바스크립트를 이용한 캔버스 접근 구조

• 자바스크립트 코드에서 캔버스에 접근하려면 적어도 <canvas> 엘리먼트에 대한 식별자가 있어야 구분할 수 있는데, 그것이 바로 id이다.
• id를 통해 <canvas> 엘리먼트에 접근하여 context 객체를 생성하는 과정을 필수적으로 코딩하고 시작해야 한다.
  

코드로 작성한 그래픽을 DeviceContext 메모리에 쓰고, 메모리에 쓰여진 것이 모니터로 출력이 되는 것이다.
코드는 바로 모니터로 출력할 수 없음!

---

캔버스 API 사용하기

캔버스 좌표 설정

• 캔버스 좌표의 원점은 좌상단 지점이다.
  

• 원점이 좌상단이므로 x축으로는 가장 왼쪽을 기준으로 오른쪽으로 갈수록 x축의 값은 증가하고, 왼쪽으로 갈수록 x축의 값은 감소한다

사각형 그리기

• HTML5에서는 사각형을 그릴 수 있는 캔버스 API를 따로 제공하고 있는데, 다음과 같이 3개의 API를 지원한다.
  

• 각 API에 공통적으로 들어가야하는 전달인자들이 총 4개가 있다.
  

• API 사용 형태
  

<canvas id="mycanvas" width="600" height="400" style="border: 3px solid"></canvas>

<script>
	var ctx = document.getElementById("mycanvas");
    var myContext = ctx.getContext("2d");

	myContext.strokeRect(10, 10, 200, 150);
	myContext.fillRect(250, 10, 200, 150);
	myContext.fillRect(10, 170, 200, 150);
	myContext.clearRect(270, 20, 100, 50);
</script>

선 그리기

• beginPath() / closePath() 메소드
  context.beginPath();
context.closePath();

• moveTo() / lineTo() 메소드
  moveTo(x1, y1);
lineTo(x2, y2);
context.moveTo(100,20);
context.lineTo(40,120);
context.lineTo(160,120);
  

• stroke() / fill() 메소드
  패스 경로를 따라 그리는 메소드가 stroke()이다.
  

<canvas id="mycanvas" width="600" height="400" style="border: 3px solid"></canvas>

<script>
	var ctx = document.getElementById("mycanvas");
	var myContext = ctx.getContext("2d");

	// 선그리기
	myContext.beginPath();
	myContext.moveTo(100,20);
	myContext.lineTo(40,120);
	myContext.lineTo(160,120);
	myContext.fill();

	myContext.moveTo(300,20);
	myContext.lineTo(200,60);
	myContext.lineTo(200,120);
	myContext.lineTo(400,120);
	myContext.lineTo(400,60);
	myContext.closePath();
	myContext.stroke();
</script>