Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HTML5 Canvas Overview
성용진
웹클라이언트 개발실
2015.10.26
ⓒ 2011 NHNTECHNOLOGY SERVICES CORPORATION
목차
1. HTML5 Canvas 소개 및 특징
1. 소개 및 지원브라우저
2. CanvasRenderingContext2D
3. 즉시모드 / 보류모드
4. Mouse Event처리
2. Canvas 로 할 수 있는 것...
3
1-1. HTML5 Canvas 소개 및 특징 ( 소개 및 지원브라우저 )
• Canvas 소개
• Canvas는브라우저에서 지원하는 2D 드로잉 플랫폼이다.
• HTML 요소의하나이며 HTML5에서지원을한다.
• ...
4
1-2. HTML5 Canvas 소개 및 특징 ( CanvasRenderingContext2D )
• Canvas와 CanvasRenderingContext2D (이후Context2D 라 칭함 )
• Canvas 객...
5
1-3. HTML5 Canvas 소개 및 특징 ( 즉시모드 / 보류모드 )
• 즉시모드
• 그래픽 라이브러리는 장면에 그려지는 내부 모델에 대한 어떠한 정보도 유지하지 않는다
• 완성된 그림의 도형을 개별적으로 편집...
6
1-4. HTML5 Canvas 소개 및 특징 ( Mouse Event 처리 )
• Context2D 에 그려진 Shape은픽셀의집합일 뿐이라 Shape에Mouse Event등을 정의하기가 어렵다.
• Flash나S...
7
2-1. Canvas로 할 수 있는 것 ( Drawing Shape )
• 선, 직사각형, 원, 베지어 곡선을 그리기 위한 강력한 API를제공하여 다양한 Shape를그릴수 있다.
• 단색, 투명도, 그라디언트, 패턴...
8
2-2. Canvas로 할 수 있는 것 ( Pixel Manipulation )
• getImageData(x,y,width,height) 메소드를 이용하여 Context2D의pixel 정보에 접근할 수 있다.
• ...
9
2-3. Canvas로 할 수 있는 것 ( Animation/Game )
• Game에서Animation을표현할 때 Sprite SheetImage를 이용한다.
• drawImage(img, sx, sy, sw, s...
10
3-1. Canvas와 WebGL ( 1 )
• WebGL은OpenGL ES2.0을 기반으로 한다.
• HTML의Canvas에렌더링을하지만 context는WebGLRenderingContext객체로서
앞의 Canv...
11
3-2. Canvas와 WebGL ( 2 )
• Vertex Shader에서는 Vertex의조작(Transform, Translation)과
투영(Projecton)이 이루어지는데 Matrix를이용한다.
• 투영은...
12
4. Canvas와 Flash
• Flash에서 CreateJS Library (http://createjs.com/)를지원하여 Flash와비슷한 개발환경을 제공한다.
• 기존 FlashContents 를 그대로 ...
13
5. 네이버 Canvas 적용 사례
• 쥬니버 뽀로로 게임
• 쥬니버에서 서비스 중인 PC용 Flash뽀로로 게임 을 Canvas로전환하여모바일에서 서비스 함
• 스포츠 야구
• 네이버 스포츠에서 서비스중인 프로야...
Thank you.
Prochain SlideShare
Chargement dans…5
×

[Naver d2]html5 canvas overview

5 216 vues

Publié le

[NAVER D2]html5 canvas overview
HTML5 Canvas 소개 및 특징
- 소개 및 지원브라우저
- CanvasRenderingContext2D
- 즉시모드 / 보류모드
- Mouse Event 처리
Canvas 로 할 수 있는 것
- Drawing Shape
- Pixel Manipulation
- Animation
Canvas와 WebGL
Canvas와 Flash
Cavnas 적용사례

Publié dans : Technologie
  • Login to see the comments

[Naver d2]html5 canvas overview

  1. 1. HTML5 Canvas Overview 성용진 웹클라이언트 개발실 2015.10.26 ⓒ 2011 NHNTECHNOLOGY SERVICES CORPORATION
  2. 2. 목차 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. 3. 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. 4. 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. 5. 5 1-3. HTML5 Canvas 소개 및 특징 ( 즉시모드 / 보류모드 ) • 즉시모드 • 그래픽 라이브러리는 장면에 그려지는 내부 모델에 대한 어떠한 정보도 유지하지 않는다 • 완성된 그림의 도형을 개별적으로 편집할 수 없으며, 매 프레임마다 전체장면을 다시 그리는 방식이다 • Canvas는즉시모드이다. • 보류모드 • 그래픽 라이브러리는 렌더링할 내부 모델과 장면 그래프에 대한 정보를 유지한다 • 매 프레임마다 전체장면을 그리지 않고 변화된 부분만 그리게 된다 • Flash, SVG 등은보류모드이다. < 즉시모드 > < 보류모드 >
  6. 6. 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. 7. 7 2-1. Canvas로 할 수 있는 것 ( Drawing Shape ) • 선, 직사각형, 원, 베지어 곡선을 그리기 위한 강력한 API를제공하여 다양한 Shape를그릴수 있다. • 단색, 투명도, 그라디언트, 패턴 등으로 Shape을칠할수 있다. • Shape의이동, 회전, 확대/축소가가능하다. • transform 함수를 이용하여 Matrix을이용한 Transform이가능하다. • 도형을 회전 할 경우 도형을 회전하는 것이 아니라 context를 회전하여 그리는 방식이다 < rotate 의 원리>
  8. 8. 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. 9. 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. 10. 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. 11. 11 3-2. Canvas와 WebGL ( 2 ) • Vertex Shader에서는 Vertex의조작(Transform, Translation)과 투영(Projecton)이 이루어지는데 Matrix를이용한다. • 투영은 주로 원근 투영(Perspective Projection)을하여3D상의 정점을 2D로 표현(투영)하게 된다. • FragmentShader에서는 image로부터Texel (Texture Pixel)를추출하여 Fragment에입힌다
  12. 12. 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. 13. 13 5. 네이버 Canvas 적용 사례 • 쥬니버 뽀로로 게임 • 쥬니버에서 서비스 중인 PC용 Flash뽀로로 게임 을 Canvas로전환하여모바일에서 서비스 함 • 스포츠 야구 • 네이버 스포츠에서 서비스중인 프로야구 문자 중계 서비스 Flash를Canvas로전환 함 (PC 웹)
  14. 14. Thank you.

×