Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.
Upcoming SlideShare
Loading in …5
×

[Naver d2]html5 canvas overview

5,179 views

Published on

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

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[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.

×