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 = “#ff0000”;  ..
HTML5 Canvas 2012. 2. 29. 10:26

Node.js란?

♣ Node.js 란? Client-side language인 JavaScript를 server-side에서 이용할 수 있도록, Chrome의 JavaScript 엔진인 V8을 포팅한 것이 node.js라고 한다. JavaScript가 기본적으로 비동기적으로 동작하기 때문에, node.js를 이용하여 서버에서도 이렇게 프로그래밍하는 경우 병렬 프로그래밍에 유리해 성능이 좋다고 알려져 있다. http://nodejs.org - IBM기사 [2011.05.24] - Node.js 위키백과 - 개발자 PREVIEW (english) [2009.11.08] - blog; Node.js의 소개글 들에 대한 유감 [2012.02.25] ♣ 주요 특징 ① 비동기 I/O (non-blocking) ② Single Th..
용어·개념 2012. 2. 28. 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