예
로 새로운 변환 행렬 추가, 사각형 그리기 transform() 다시 사각형을 그립니다, 새로운 변환 행렬을 추가, 다시 사각형을 그립니다. 전화 할 때마다 알 수 있습니다 transform() , 그것은 이전의 변환 행렬을 기반으로 :
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100); »그것을 자신을 시도 브라우저 지원
표의 수치는 완전히 방법을 지원하는 제 브라우저 버전을 지정.
| 방법 | |||||
|---|---|---|---|---|---|
| transform() | 예 | 9.0 | 예 | 예 | 예 |
정의 및 사용
캔버스에 각 객체는 현재 변환 행렬을 보유하고 있습니다.
transform() 메소드는, 현재의 변환 행렬을 대체합니다. 이 설명 매트릭스와 현재의 변환 행렬을 곱
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
즉,은 transform() 방법은 이동, 회전, 스케일링 할 수 있으며 현재 컨텍스트 왜곡.
참고 : 후 변환 만 만든 도면에 영향을 미칠 것이다 transform() 메서드가 호출됩니다.
참고 :이 transform() 방법에 의해 다른 변형에 상대적으로 동작 rotate(), scale(), translate() , 또는 transform() .예 : 이미 2로 규모로 도면을 설정하고,이 경우 transform() 메소드가 2로 당신의 그림을 확장, 당신의 그림은 네 가지로 현재 규모는 것입니다.
팁 : 체크 아웃 setTransform() 다른 변형에 상대적으로 작동하지 않는 방법을.
| 자바 스크립트 구문 : | context.transform( a,b,c,d,e,f ); |
|---|
매개 변수 값
| 매개 변수 | 기술 | 플레이 |
|---|---|---|
| a | 수평 그리기를 조절합니다 | »플레이 |
| b | 상기 수평 그리기 왜곡 | »플레이 |
| c | 상기 수직으로 그림을 왜곡 | »플레이 |
| d | 수직 그리기를 조절합니다 | »플레이 |
| e | 상기 수평 그리기 이동 | »플레이 |
| f | 상기 수직 그리기 이동 | »플레이 |