HTML5 - [12]이동,회전, 확대/축소, 텍스트, 애니메이션

HTML5 - [12]이동,회전, 확대/축소, 텍스트, 애니메이션

정리하기

(1) 도형 합성

globalCompositeOperation 속성 → 도형이 겹쳐지는 부분에 대한 처리 방식을 지정

• source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, copy, xor, darker

(2) 좌표 공간의 변환

translate(x,y) → 좌표 공간의 시작점을 (x,y)로 이동

rotate(각도) → 좌표 공간을 시계 방향으로 주어진 각도만큼 회전

scale(x, y) → 좌표 공간을 수평/수직 방향으로 확대/축소

사용자 정의 변환 → transform(a,b,c,d,e,f), setTransform(a,b,c,d,e,f)

• a: 수평으로 확대/축소, b: 수평으로 기울임, c: 수직으로 기울임, d: 수직으로 확대/축소, e: 수평으로 이동, f: 수직으로 이동

(3) 텍스트 그리기

fillText(텍스트, x, y [, 최대폭 ] ) → 지정된 위치에 색이 채워진 텍스트를 삽입

strokeText(텍스트, x, y [, 최대폭 ] ) → 지정된 위치에 테두리만 있는 텍스트를 삽입

measureText(텍스트) → 현재 글꼴에서 주어진 텍스트의 폭을 반환

(4) 텍스트 글꼴 설정 및 배치

font 속성 → 글자 스타일, 글자 크기, 글꼴을 지정

textAlign 속성 → 수평 방향에 대한 텍스트의 정렬 방식을 지정

• left, right, center, start, end

textBaseline 속성 → 텍스트의 수직에 대한 기준선 지정

• top, hanging, middle, alphabetic, ideographic, bottom

(5) 이미지 삽입

• var 변수 = new Image();
• 변수.src = '이미지 주소';
• context.drawImage(변수, …);

drawImage(이미지변수, dx, dy) → 이미지를 원래 크기로 삽입

drawImage(이미지변수, dx, dy, dw, dh) → 이미지를 지정한 크기로 삽입

drawImage(이미지변수, sx, sy, sw, sh, dx, dy, dw, dh) → 이미지의 일부분을 잘라내어 원하는 크기로 삽입

(6) 이미지 조작

변수 = context.createImageData(sw, sh)

• 지정한 크기의 모든 픽셀이 투명한 검은색으로 초기화된 ImageData 객체 생성

변수 = context.getImageData(sx, sy, sw, sh)

• 캔버스 영역에 지정된 사각형 영역에 대한 이미지를 포함한 ImageData 객체 반환

context.putImageData(이미지데이터변수, dx, dy)

• 지정된 ImageData 객체의 데이터를 캔버스에 그린다.

url = canvas.toDataURL(이미지형식, 이미지품질)

• 캔버스에 그려진 내용을 URL 문자열로 반환하는 캔버스 API

클리핑

• 클리핑 영역 지정 → 원하는 클리핑 모양의 패스를 지정한 다음 clip() 메서드 호출
• 클리핑 영역 지우기 → clearRect() 메서드 사용

(7) 애니메이션

requestId = window.requestAnimationFrame()

• 다음 애니메이션 프레임을 그릴 준비가 되면 브라우저에게 특정 콜백을 호출할 수 있도록 요청 → 다음 애니메이션을 그릴 시간을 알 필요 없음

window.cancelAnimationFrame(requestId)

• 애니메이션 프레임을 업데이트하도록 이전에 예약되어 있는 콜백 요청을 취소