Canvas setTransform() 메서드
정의와 사용법
화면의 각 객체는 현재 변환 행렬을 가집니다.
setTransform() 메서드는 현재 변환 행렬을 기본 행렬로 초기화한 후 동일한 매개변수로 실행합니다 transform().
다시 말해, setTransform()는 현재 환경을 확대, 회전, 이동 및 기울이기에 사용할 수 있습니다.
주의사항:이 변환은 setTransform() 메서드 호출 이후의 그래픽에 영향을 미칩니다.
예제
setTransform()를 통해 변환 행렬을 재설정하고 새로운 변환 행렬을 생성하여 다시 직사각형을 그리고, 변환 행렬을 재설정하고 새로운 변환 행렬을 생성하여 다시 직사각형을 그립니다. 주의하세요, setTransform()를 호출할 때마다 이전 변환 행렬을 초기화하고 새로운 행렬을 구성합니다. 따라서 아래의 예제에서는 빨간 직사각형이 파란 직사각형 아래에 있어서 보이지 않습니다:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
문법
context.setTransform(a,b,c,d,e,f);
파라미터 값
| 파라미터 | 설명 |
|---|---|
| a | 수평회전 그래픽. |
| b | 수평축척 그래픽. |
| c | 직접축척 그래픽. |
| d | 직접축소 그래픽. |
| e | 수평 이동 그리기. |
| f | 수직 이동 그리기. |
브라우저 지원
표에 나타난 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전입니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
