HTML 캔버스 transform() 메서드
예시
직사각형을 그리고, 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);
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
캔버스의 각 개체에는 현재 변환 행렬이 있습니다.
transform() 메서드는 현재 변환 행렬을 대체합니다. 현재 변환 행렬에 다음과 같이 설명된 행렬을 곱합니다.
| ㅏ | 씨 | 이자형 |
| 비 | 디 | 에프 |
| 0 | 0 | 1 |
즉, transform() 메서드를 사용하면 현재 컨텍스트의 크기를 조정, 회전, 이동 및 기울일 수 있습니다.
참고: 변환은 transform() 메서드가 호출된 후에 작성된 도면에만 영향을 미칩니다.
참고: transform() 메서드는 rotate(), scale(), translate() 또는 transform()에 의해 만들어진 다른 변환에 상대적으로 작동합니다. 예: 이미 도면의 배율을 2로 설정했고 transform() 메서드가 도면의 배율을 2로 조정했다면 이제 도면의 배율은 4가 됩니다.
팁: 다른 변환에 비해 상대적으로 작동하지 않는 setTransform() 메서드를 확인하십시오 .
| 자바스크립트 구문: | 컨텍스트 .transform( a, b, c, d, e, f ); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawing horizontally | |
| b | Skew the the drawing horizontally | |
| c | Skew the the drawing vertically | |
| d | Scales the drawing vertically | |
| e | Moves the the drawing horizontally | |
| f | Moves the the drawing vertically |
❮ 캔버스 개체