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);
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);
»시도
브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 사용해 setTransform () 메소드.
참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.
정의 및 사용
캔버스에 각 객체는 현재 변환 행렬을 보유하고 있습니다.
현재 변환 행렬을 사용해 setTransform () 메서드는 행렬을 재설정 한 다음 동일한 매개 변수와 함께 실행 변형 () .
즉, 사용해 setTransform는 ()는, 회전, 줌 이동하고 현재의 환경을 기울일 수있다.
참고 :이 변환은 영향을 사용해 setTransform () 메소드는 추첨 후라고합니다.
| 자바 스크립트 구문 : | 컨텍스트 .setTransform (A, B, C, D, E, F); |
|---|
매개 변수 값
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |
HTML 캔버스 참조 설명서