예
직사각형을 그립니다 재설정과 새로운 변환 행렬 작성 setTransform() 다시 사각형을 그릴 재설정하고 새로운 변환 행렬을 만든 다음 다시 사각형을 그립니다. 당신이 호출 할 때마다 알 setTransform() , 그것은 이전의 변환 행렬을 재설정하고 아래의 예에서 빨간색 사각형이 표시되지 않도록는 파란색 사각형 아래에 있기 때문에 다음, 새로운 매트릭스를 작성합니다 :
자바 스크립트 :
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);
»그것을 자신을 시도 브라우저 지원
표의 수치는 완전히 방법을 지원하는 제 브라우저 버전을 지정.
| 방법 | |||||
|---|---|---|---|---|---|
| setTransform() | 예 | 9.0 | 예 | 예 | 예 |
정의 및 사용
캔버스에 각 객체는 현재 변환 행렬을 보유하고 있습니다.
setTransform() 메소드는, 현재의 행렬 변환을 다시 설정 한 후 실행 transform() 같은 인수.
즉, setTransform() 메서드를 사용하면, 이동, 회전, 확장, 현재 상황을 왜곡 할 수 있습니다.
참고 : 사용해 setTransform 메서드가 호출 된 후 변환 만 만든 도면에 영향을 미칠 것입니다.
| 자바 스크립트 구문 : | context.setTransform( a,b,c,d,e,f ); |
|---|
매개 변수 값
| 매개 변수 | 기술 | 플레이 |
|---|---|---|
| a | 수평으로 그림을 저울 | »플레이 |
| b | 수평으로 그림을 기울입니다 | »플레이 |
| c | 수직으로 그림을 기울입니다 | »플레이 |
| d | 수직으로 그림을 저울 | »플레이 |
| e | 수평으로 도면을 이동 | »플레이 |
| f | 수직으로 도면을 이동 | »플레이 |