HTML 캔버스 setTransform() 메서드
예시
사각형을 그리고, 재설정하고 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);
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
캔버스의 각 개체에는 현재 변환 행렬이 있습니다.
setTransform() 메서드는 현재 변환을 단위 행렬로 재설정한 다음 동일한 인수로 transform() 을 실행합니다.
즉, setTransform() 메서드를 사용하면 현재 컨텍스트의 크기를 조정, 회전, 이동 및 기울일 수 있습니다.
참고: 변환은 setTransform 메소드가 호출된 후에 작성된 도면에만 영향을 미칩니다.
| 자바스크립트 구문: | 컨텍스트 .setTransform( a,b,c,d,e,f ); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML 캔버스 참조