HTML5�Canvas Overview

성용진

웹클라이언트 개발실

2015.10.26

ⓒ 2011�NHN�TECHNOLOGY�SERVICES�CORPORATION

목차

1. HTML5�Canvas�소개및특징

1. 소개및 지원브라우저

2. CanvasRenderingContext2D

3. 즉시모드 /�보류모드

4. Mouse�Event�처리

2. Canvas�로할수 있는것

1. Drawing�Shape

2. Pixel�Manipulation

3. Animation

3. Canvas와WebGL (1)�(2)

4. Canvas와 Flash

5. Cavnas 적용사례

6. Q�&�A

3

1-1.�HTML5�Canvas�소개및특징 (�소개및지원브라우저)�

• Canvas�소개

• Canvas는브라우저에서지원하는2D�드로잉플랫폼이다.

• HTML�요소의하나이며 HTML5에서지원을한다.

• Javascript와HTML�만을이용하여구현이가능하다.

• Bitmap�기반이며즉시모드로 그래픽을처리한다.

• 그래프를그리거나 사진합성,�픽셀조작,��에니메이션의처리가가능하다.

• Low�level의API를제공하여유연한조작이 가능하나그만큼구현이 복잡하다.

• Canvas를지원하는브라우저

• 모든모바일 브라우저에서Canvas지원

• PC는 IE�8.0�이하는지원되지 않음(2015년 상반기 국내IE�8.0�이하 점유율 14%(statcounter )�,�28%(�koreahtml5.kr)

4

1-2.�HTML5�Canvas�소개및특징 (�CanvasRenderingContext2D�)

• Canvas와 CanvasRenderingContext2D�(�이후Context2D�라칭함 )

• Canvas�객체는컨테이너로서의역할만하며 그래픽능력은CanvasRenderingContext2D�객체에있다.

• Canvas�객체는DOM 이지만Context2D�에그려지는그래픽은DOM으로접근이안되고단지비트맵일뿐이다.

var theCanvas =�document.getElementById("myCanvas" )

If(�!theCanvas ||� !theCanvas.getContext )������

{���

}

<canvas id="myCanvas" width="200" height="100"></canvas>

• Canvas를지원하는지알아보기

• Canvas의그리기영역인 context가있는지 체크한다

5

1-3.�HTML5�Canvas�소개및특징 (�즉시모드/�보류모드 )

• 즉시모드

• 그래픽라이브러리는 장면에그려지는 내부모델에대한어떠한 정보도유지하지않는다

• 완성된그림의 도형을개별적으로편집할 수없으며, 매프레임마다전체장면을 다시그리는방식이다

• Canvas는즉시모드이다.

• 보류모드

• 그래픽라이브러리는 렌더링할내부모델과 장면그래프에대한 정보를유지한다

• 매프레임마다 전체장면을그리지않고 변화된부분만그리게 된다

• Flash,�SVG�등은보류모드이다.

<�즉시모드 > <�보류모드 >

6

1-4.�HTML5�Canvas�소개및특징 (�Mouse�Event�처리 )

• Context2D�에 그려진 Shape은픽셀의집합일 뿐이라 Shape에Mouse�Event�등을정의하기가어렵다.

• Flash나SVG�에서는 Shape을객체로취급하여다양한속성과 기능,�Event��처리가 가능하다.var svgElement =�document.getElementById("rect1");�

svgElement.addEventListener("mouseover",� mouseOver);

• Canvas�객체에 Mouse�Event를걸며,�callback으로들어온정보와그려진 Shape정보를비교하여 Event를판별한다.

• Canvas�객체에서발생된Mouse�Event의 좌표점이 Shape안에포함되어있는지를 조사한다.canvas.addEventListener("mousemove",� mousemove)

function� mousemove(e)

{���

//�canvas를 기준으로 Mouse�위치 계산

var rect =�canvas.getBoundingClientRect();�

console.log(e.clientX - rect.left);

console.log(e.clientY - rect.top );

//��마우스 좌표가 shape(원) 안에 있는지 판별

//�(�마우스 위치 -원의 중심)� �<��(원의 반지름의 길이)� �라면 원 안에 마우스가 있는 것이다.

}

• Shape�복잡할경우 context.isPointInPath(�x,�y�)�API를이용할수있으나성능이 떨어진다.context.beginPath();

context.arc(150,� 120,�100,� 0,�Math.PI*2,� false);

context.arc(150,� 120,�50,� 0,�Math.PI*2,� true);

context.isPointInPath(e.offsetX,� e.offsetY);

7

2-1.�Canvas로할수있는것 (�Drawing�Shape�)

• 선,�직사각형,�원,�베지어곡선을 그리기위한강력한 API를제공하여다양한 Shape를그릴수있다.

• 단색,�투명도,�그라디언트,�패턴 등으로 Shape을칠할수 있다.

• Shape의이동,�회전,�확대/축소가가능하다.�

• transform�함수를이용하여 Matrix을이용한 Transform이가능하다.

• 도형을회전 할경우도형을회전하는 것이아니라 context를회전하여그리는 방식이다

<�rotate�의원리>

8

2-2.�Canvas로할수있는것 (�Pixel�Manipulation�)

• getImageData(x,y,width,height)��메소드를이용하여Context2D의pixel�정보에 접근할수있다.

• pixel�정보는배열타입이며 red,�green,�blue,�alpha�값을접근하고조작할수 있다.

• 각 pixel�정보를조작하여 brigtness,�grayscale,�contrast,�saturation�의효과를줄수있다.

• RGBA는각각 1byte의공간을차지하므로 하나의pixel은4byte의크기를 가진다

• 반복문으로4byte�씩이동하면서각픽셀의RGBA�값을변형시킨다.

<�brightness�의원리>

9

2-3.�Canvas로할수있는것 (�Animation/Game�)

• Game에서Animation을표현할때 Sprite�Sheet�Image를 이용한다.

• drawImage(img,�sx,�sy,�sw,�sh,�dx,�dy,�dw,�dh) API를이용한다.

ü requestAnimationFrame의사용

• Animation을구현할때는window.setInterval(�),�window.setTimeout(�)�API를사용하지않는다.

• 위두 API는리소스를많이사용하는 animation구현시프레임의 손실이발생한다.

• setInterval,�setTimout의주기와 모니터주파수 주기가다를경우 animation은튀게된다.�

(붉은색화살표는 화면에표시가안됨)

• window.requestAnimationFrame(�)은프레임손실없게호출해 줌 (60FPS)

• requestAnimationFrame은브라우저마다이름이 약간씩다르므로주의가 필요

• webkitRequestAnimationFrame (�크롬 )�/�mozkitRequestAnimationFrame(파이어폭스)

모니터주파수 :�60hz��(16.7�ms)

setInterval호출주기 :�10�ms

10

3-1.�Canvas와WebGL (�1�)

• WebGL은OpenGL�ES2.0을기반으로한다.

• HTML의Canvas에렌더링을하지만 context는WebGLRenderingContext객체로서

앞의CanvasRenderingContext2D�와는전혀다른 기능을가진다.

var canvas�=�document.getElementById("canvas");

gl =�canvas.getContext("webgl");

• PC�는 IE11�이상,�FF�4+,�Chrome�9+,�Safari�5.1+��

• 모바일은 iOS�8�이상,��Android는크롬브라우저지원(version�30+)

• Javascirpt를이용하지만 OpenGL�Shading�Language에대한이해가필요하다.

• GPU는정점 (Vertex)�을조작(�Translate,�Transformation)�한다àVertex�Shader

• GPU는Rasterize�된Fragment에color를입힌다 à Fragment�Shader

11

3-2.�Canvas와WebGL (�2�)

• Vertex�Shader에서는Vertex의조작(Transform,�Translation)�과

투영(Projecton)이이루어지는데Matrix를이용한다.

• 투영은주로 원근투영(Perspective�Projection)을하여3D상의정점을

2D로표현(투영)하게된다.

• Fragment�Shader에서는 image로부터Texel�(Texture�Pixel)를추출하여

Fragment에입힌다

12

4.�Canvas와 Flash

• Flash�에서 CreateJS Library�(http://createjs.com/)�를지원하여 Flash와비슷한개발환경을 제공한다.

• 기존 Flash�Contents�를그대로 Canvas로바꿀경우 CreateJS를이용하면디자인리소스를 그대로재활용이가능하다.

• Animation

• Flash�Timeline에정의된Animation은그대로CanvasAnimation으로전환된다.

• 개발코드가 없는 static�한 Animation,��광고(Banner)�등이변경가능하다

• Casual�Game�

• Flash에서사용한 image�asset을재활용할수있다.�

• Image는재사용이가능하나코드는재개발이 필요하다.

• Google�Swiff

• swf를upload하면 canvas로변환해준다.

• Animation�기반의 banner�변환이주목적이다.�

• https://developers.google.com/swiffy/

13

5.�네이버Canvas�적용사례

• 쥬니버뽀로로 게임

• 쥬니버에서서비스 중인PC용 Flash�뽀로로게임을 Canvas로전환하여모바일에서 서비스함

• 스포츠야구

• 네이버스포츠에서 서비스중인프로야구 문자중계서비스 Flash를Canvas로전환함 (PC�웹)

Thank�you.