HTML5 Canvas
반응형
검색 결과

해당 글 9건

CHAR 7. HTML5 캔버스와 오디오

7.1 태그 Your browser does not support the audio element. 7.2 오디오 형식 BrowserMP3WavOgg Internet Explorer 9 YES NO NO Firefox 4.0 NO YES YES Google Chrome 6 YES YES YES Apple Safari 5 YES YES NO Opera 10.6 NO YES YES ▼ 변환 프로그램: Audacity (윈도우, 맥, 리눅스) 7.3 오디오 태그의 속성, 함수, 이벤트 ▼ 참고: http://www.w3.org/2010/05/video/mediaevents.html ▼ 오디오/비디오 함수 MethodDescription addTextTrack() Adds a new text track to t..
HTML5 Canvas 2012. 3. 18. 00:32

CHAR 6. HTML5 캔버스와 비디오

6.1 HTML5의 비디오 지원 ▼ 플랫폼별 지원 비디오 포맷 [2012.01] 플랫폼MP4WebMOgg Android YES Firefox YES Chrome YES YES iPhone YES IE9 YES Opera YES YES Safari YES ▼ 브라우저별 지원 비디오 포맷 [출처, 2012.03.17] BrowserMP4WebMOgg Internet Explorer 9 YES NO NO Firefox 4.0 NO YES YES Google Chrome 6 YES YES YES Apple Safari 5 YES NO NO Opera 10.6 NO YES YES MP4 = H.264 비디오 코덱과 AAC 오디오 코덱을 사용한 MPEG 4 파일 WebM = VP8 비디오 코덱과 Vorbis 오디오..
HTML5 Canvas 2012. 3. 13. 21:46

CHAP 5. 수학과 물리학을 적용한 애니메이션 -- 미완성

♣ 목표 - 어떻게 하면 사용자의 기대대로 움직이게 할까? - 수학 알고리즘과 물리학적인 상호작용을 알아야 한다. javascript:; - 점과 벡터를 바탕으로 일직선상의 움직임, 벽을 맞고 튀는 객체와 추가로 마찰력을 적용한 객체를 만들어보자. - 직선운동 외에 원, 나선, 베지어 곡선의 움직임도 알아보자. - 중력이 움직임에 미치는 영향도 보자. - 가속도에 대해 알아보자. 5.1 일직선상으로 움직이기 5.1.1 두 점 사이의 거리 - 피타고라스의 정의(A2 + B2 = C2) 이용 - [공식5-1] 두 점간 거리 공식 ▼ [예제 5-2] 직선 이동(full source) Your browser does not support the HTML 5 Canvas. 5.1.2 벡터에 따른 움직임 - 시작점..
HTML5 Canvas 2012. 3. 5. 17:06

CHAR 4. 캔버스에서의 이미지

▼ 캔버스에서 이미지로 할 수 있는 일 ① 이미지 출력 ② 픽셀단위 변경 후 출력 4.2 기본적인 이미지 처리 ▼ 이미지 선언 1) HTML 2) JavaScript var spaceShip = new Image(); spaceShip.src = "ship1.png"; 4.2.1 이미지 미리 불러오기 - 코드 실행 전에 필요한 이미지가 완전히 로드되었는지 확인필요 →이미지의 load 이벤트를 기다리는 이벤트 리스너 추가 4.2.2 drawImage()로 이미지 출력 ▼ context.drawImage(Image, dx, dy); ▼ context.drawImage(Image, dx, dy, dw, dh); -- 이미지 스케일링 - dw, dh: 출력할 크기 / 원본이미지와 크기가 다르면 자동 크기 변환 ..
HTML5 Canvas 2012. 3. 1. 23:39

CHAR 3. HTML5 캔버스 문자 API

♣ 소스: ch3.zip• 챕터 목표1) 캔버스 문자API의 기능과 API간 상호 연관성을 알아보자.2) 현재 브라우저가 어디까지 지원하는지 알아보자.3) 그린 문자가 브라우저에 따라 어떻게 다르게 출력되는지 알아보자.4) 아래 이미지는 챕터의 최종 결과물3.1 문자 출력의 기본3.1.1 기본 문자 출력- CSS폰트 스타일에 값 설정후 context.font 스타일을 설정context.font = "30px serif";context.fillStyle = "#ff0000";context.fillText("Hello World", 50, 80);3.1.2 Text Arranger에서의 기본적인 문자 출력- 사용자가 입력한 문자열(msg) 출력    context.fillStyle = “#ff00..
HTML5 Canvas 2012. 2. 29. 10:26

CHAR 2. 캔버스에 그리기

▼셀프제작데모: 눈내리기 효과 (2017.04.10 NAS2Dual 테스트용 페이지) 2.1 예제 기본 소스 템플릿 브라우저가 HTML5 Canvas를 지원하지 않습니다.(지원브라우저; IE9이상, 크롬, 사파리, 파이어폭스) 2.2 기본 사각형 그리기 메서드 - fillRect (fillStyle), strokeRect(strokeStyle), clearRect 2.3 캔버스 상태정보★ - 컨텍스트 상태 정보 스택에는 상태정보 데이터가 있다. 회전/이동에 대한 변환 행렬 정보 현재의 영역 선택 정보 캔버스 특성의 현재 값: globalAlpha, globalCompositeOperation, strokeStyle, textAlign/textBaseline, lineCap/lineJoin/lineWidt..
HTML5 Canvas 2012. 2. 22. 17:03

CHAR 1. HTML5 캔버스 소개

▼ HTML5 코드 연습장: 코드를 수정해서 바로 실행결과를 확인할 수 있다 [열기] ▼ Canvas는? - Canvas는 HTML에서 엘리먼트(요소)라고 불린다. - 원리: JavaScript의 캔버스API로 코드를 만들면 Canvas는 프레임마다 비트맵 화면을 다시 그린다. - Canvas는 즉시모드(imediate mode)를 사용한다. ↔ 보류모드(retained mode): 플래시, 실버라이트, SVG - JavaScript 코드 충돌에 유의한다 (scope/namespace 이용해서 충돌을 피한다) 1.1 기본적인 HTML 페이지 // 브라우저에게 렌더링 타입을 알려준다. // 영어: en, 일본어: ja Hello World! 1.2 사용할 기본적인 HTML ▼ div & canvas You..
HTML5 Canvas 2012. 2. 21. 17:39