[Naver d2]html5 canvas overview

HTML5 Canvas Overview
성용진
웹클라이언트 개발실
2015.10.26
ⓒ 2011 NHNTECHNOLOGY SERVICES CORPORATION

목차
1. HTML5 Canvas 소개 및 특징
1. 소개 및 지원브라우저
2. CanvasRenderingContext2D
3. 즉시모드 / 보류모드
4. Mouse Event처리
2. Canvas 로 할 수 있는 것
1. DrawingShape
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 SheetImage를 이용한다.
• 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 ShadingLanguage에대한이해가 필요하다.
• GPU는정점 (Vertex) 을 조작( Translate, Transformation)한다à Vertex Shader
• GPU는Rasterize 된Fragment에color를입힌다 à FragmentShader

11
3-2. Canvas와 WebGL ( 2 )
• Vertex Shader에서는 Vertex의조작(Transform, Translation)과
투영(Projecton)이 이루어지는데 Matrix를이용한다.
• 투영은 주로 원근 투영(Perspective Projection)을하여3D상의 정점을
2D로 표현(투영)하게 된다.
• FragmentShader에서는 image로부터Texel (Texture Pixel)를추출하여
Fragment에입힌다

12
4. Canvas와 Flash
• Flash에서 CreateJS Library (http://createjs.com/)를지원하여 Flash와비슷한 개발환경을 제공한다.
• 기존 FlashContents 를 그대로 Canvas로바꿀경우 CreateJS를이용하면디자인 리소스를 그대로 재활용이 가능하다.
• Animation
• FlashTimeline에정의된Animation은그대로Canvas Animation으로전환된다.
• 개발 코드가 없는 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 웹)

[Naver d2]html5 canvas overview

More Related Content

What's hot (20)

Similar to [Naver d2]html5 canvas overview (20)

More from NAVER D2 (20)

[Naver d2]html5 canvas overview