HTML5 Canvas Introduction, what is canvas, basic example about canvas, my open course.

1. HTML5 canvas Introduction
Made by leesanghun. Date 15.01.14

2. contents
• HTML5의 중요성
• Canvas란 무엇인가?
• HTML5에서의 Canvas란 무엇인가?
• HTML Canvas Drawing
• Canvas로 할 수 있는 일들.
• 기존에 필요한 지식 & 오픈 코스

3. HTML5의 중요성

4. HTML5의 중요성

5. HTML5의 중요성

6. Canvas란 무엇인가?
캔버스란 유화물감을 가지고 그림을
그릴 수 있도록 한 특수 천의 일종

7. Canvas란 무엇인가?
HTML5에서 지원하는 그래픽을 그리는
것에 관한 기술
우리는 이것을 가지고 단순한 선에서
복잡한 그래픽 객체까지 그래픽, 모든
종류의 그릴 수 있다.

8. More detail about HTML Canvas
• 자바스크립트로 처리할 수 있는 즉시모드 비트맵 영역.
즉시모드(immediate mode) : 코드로 비트맵 화면을 바로 그리는
것을 의미
• 이미 구현된 객체를 이용 하는 것이 아닌, 코드로 필요한
객체를 생성하고나 변경할 수 있다.
• canvas를 지원하는 브라우저
크롬, 사파리, 파이어폭스, 오페라, IE9 이상

9. HTML Canvas Drawing

10. HTML Canvas Drawing
Step 1: Find the Canvas Element
HTML DOM 방법을 사용하여 수행한다.
getElementById ()를 이용하여 캔버스
요소를 가져온다.

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

12. HTML Canvas Drawing
Step 3: Draw on the Canvas
이제 Canvas에 그림을 그린다.
fillStyle을 통하여 개체의 스타일을
설정한다.
fillRect을 통하여 캔버스에
스타일이 채워진 사각형을 그린다.

13. Canvas로 할 수 있는 일들.
• https://www.youtube.com/watch?v=mDT1rDkjPFY

14. 기존에 필요한 지식 & 오픈 코스
• HTML5 Canvas는 정적인 HTML 태그를 넘어서 이미지 합성, 게임, 복잡한 애니메이션등을 만들 때 강
력하다.
Do you want it?
• 자바스크립트 기본과정
• HTML / CSS의 기본과정
기반 지식
• 1. HTML5 Canvas의 기본 사항
• 2. 다양한 효과 및 필터 적용 법 및 애니메이션 만드는 법
• 3. Canvas2D context에 의해 저장하는 법
• 일주일 6시간 15일 예상 (using UDACITY & w3schools)
오픈 코스

15. Thank you !!^^