HTML5 canvas IntroductionMade by leesanghun. Date 15.01.14

contents

• HTML5의 중요성

• Canvas란 무엇인가?

• HTML5에서의 Canvas란 무엇인가?

• HTML Canvas Drawing

• Canvas로 할 수 있는 일들.

• 기존에 필요한 지식 & 오픈 코스

HTML5의 중요성

HTML5의 중요성

HTML5의 중요성

Canvas란 무엇인가?

캔버스란 유화물감을 가지고 그림을그릴 수 있도록 한 특수 천의 일종

Canvas란 무엇인가?

HTML5에서 지원하는 그래픽을 그리는것에 관한 기술

우리는 이것을 가지고 단순한 선에서복잡한 그래픽 객체까지 그래픽, 모든종류의 그릴 수 있다.

More detail about HTML Canvas

• 자바스크립트로 처리할 수 있는 즉시모드 비트맵 영역.

즉시모드(immediate mode) : 코드로 비트맵 화면을 바로 그리는것을 의미

• 이미 구현된 객체를 이용 하는 것이 아닌, 코드로 필요한객체를 생성하고나 변경할 수 있다.

• canvas를 지원하는 브라우저

크롬, 사파리, 파이어폭스, 오페라, IE9 이상

HTML Canvas Drawing

HTML Canvas DrawingStep 1: Find the Canvas Element

HTML DOM 방법을 사용하여 수행한다.getElementById ()를 이용하여 캔버스요소를 가져온다.

HTML Canvas DrawingStep 2: Create a Drawing Object

Canvas contest는 도면의 속성과메소드로 HTML에 내장된 개체이다.getContext("2d")를 이용하여object를 그리기 위한Canvas생성한다.

HTML Canvas DrawingStep 3: Draw on the Canvas

이제 Canvas에 그림을 그린다.fillStyle을 통하여 개체의 스타일을설정한다.fillRect을 통하여 캔버스에스타일이 채워진 사각형을 그린다.

Canvas로 할 수 있는 일들.

• https://www.youtube.com/watch?v=mDT1rDkjPFY

기존에 필요한 지식 & 오픈 코스

• HTML5 Canvas는 정적인 HTML 태그를 넘어서 이미지 합성, 게임, 복잡한 애니메이션등을 만들 때 강

력하다.

Do you want it?

• 자바스크립트 기본과정

• HTML / CSS의 기본과정

기반 지식

• 1. HTML5 Canvas의 기본 사항

• 2. 다양한 효과 및 필터 적용 법 및 애니메이션 만드는 법

• 3. Canvas2D context에 의해 저장하는 법

• 일주일 6시간 15일 예상 (using UDACITY & w3schools)

오픈 코스

Thank you !!^^