예
가진 새로운 변환 행렬 추가 직사각형 그리기 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
캔버스 객체는 각 전류 변환 행렬을 갖는다.
transform() 메소드는, 현재의 변환 행렬을 대체한다. 이 설명 매트릭스와 현재의 변환 행렬을 승산 :
| 에이 | 기음 | 이자형 |
| 비 | 디 | 에프 |
| 0 | 0 | 1 |
즉,은 transform() 방법을 사용, 이동, 회전, 확장 할 수 있으며 현재의 상황을 왜곡.
Note: 애프터 변환이 이루어진 도면에만 영향을 미칠 것이다 transform() 메소드가 호출된다.
Note: (가) transform() 방법에 의해 다른 변환 동작 상대적 rotate() , scale() , translate() 또는 transform() . 예 : 이미 2로 규모 드로잉을 설정하고,이 경우 transform() 메소드는 두 개의하여 그림을 확장, 당신의 그림은 네 가지로 현재 규모는 것이다.
Tip: 아웃 확인 setTransform() 다른 변환에 상대적으로 작동하지 않는 방법을.
| 자바 스크립트 구문 : | context . transform( a,b,c,d,e,f ) ; |
|---|
매개 변수 값
| 매개 변수 | 기술 | 플레이 |
|---|---|---|
| a | 수평 드로잉 비늘 | »플레이 |
| b | 상기 가로 드로잉 스큐 | »플레이 |
| c | 상기 수직 드로잉 스큐 | »플레이 |
| d | 수직 그리기 저울 | »플레이 |
| e | 하여 수평 그리기 이동 | »플레이 |
| f | 하여 수직으로 그림을 이동 | »플레이 |
<캔버스 개체