DOM Canvas setTransform 함수

황제낙엽 2016.08.22 07:18 조회 수 : 148

sitelink1 http://blog.naver.com/shadowbug/220743484809 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

setTransform 함수는 변환함수를 그리기 위해서 가장 먼저 호출해야 하는 함수이다.

이 함수의 주 목적은 canvas의 기본 확대, 경사도, 이동거리를 설정하기 위해 사용된다.

 

 

설명 

 setTransform(

a, b, c,

d, e, f

)

매개변수값

a : 수평으로 확대/축소율

b : 수직방향 경사율

c : 수평방향 경사율

d : 수직방향 확대/축소율

e : 수평방향 이동거리

f : 수직방향 이동거리

 

 

2D의 평면상태

2D에서의 평면상태는 아래와 같이

확대하지 않은 상태에 경사도 없고 이동도 하지 않은 상태를 나타낸다.

 ctx.setTransform(1, 0, 0, 1, 0, 0);

 

번호 제목 글쓴이 날짜 조회 수
88 HTML5 강좌 12강 - HTML5 태그 - canvas 채우기 스타일,그라데이션 file 황제낙엽 2016.12.03 212
87 HTML5 강좌 11강 - HTML5 태그 - canvas 베지에곡선, 선 스타일 file 황제낙엽 2016.12.03 166
86 HTML5 강좌 10강 - HTML5 태그 - canvas 원그리기 file 황제낙엽 2016.12.03 202
85 HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 file 황제낙엽 2016.12.03 127
84 HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 file 황제낙엽 2016.12.03 136
83 HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 file 황제낙엽 2016.12.03 118
82 HTML5 강좌 6강 - HTML5 태그 - canvas #1 file 황제낙엽 2016.12.03 205
81 HTML5 강좌 5강 - HTML5 태그 - prograss,download file 황제낙엽 2016.12.03 130
80 HTML5 강좌 4강 - HTML5 태그 - mark,time,meter file 황제낙엽 2016.12.03 141
79 HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 file 황제낙엽 2016.12.03 139
78 HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 file 황제낙엽 2016.12.03 346
77 HTML5 강좌 1강 - HTML5 개념 및 기본구조 file 황제낙엽 2016.12.03 131
76 HTTP 오류 코드의 종류 황제낙엽 2016.12.01 138
75 Multiple Canvas Layer 예제 file 황제낙엽 2016.08.23 128
74 Canvas 개요 황제낙엽 2016.08.22 177
73 Canvas 확대 file 황제낙엽 2016.08.22 136
» Canvas setTransform 함수 황제낙엽 2016.08.22 148
71 Canvas 회전 file 황제낙엽 2016.08.22 152
70 Canvas 영역 선택 file 황제낙엽 2016.08.22 141
69 Canvas CanvasRenderingContext2D Context 속성 황제낙엽 2016.08.22 91