Latest web development tutorials

HTML 캔버스 변환 () 메소드

HTML 캔버스 참조 설명서 HTML 캔버스 참조 설명서

예

다시, 새로운 변환 행렬을 추가 사각형을 그립니다, 새로운 변환 행렬을 추가 한 다음 다시 사각형을 그립니다 () 변환하여 사각형을 그립니다. 당신은 () 변환을 호출 할 때마다,이 행렬에 변환을 구축하는 첫 번째가 될 것입니다 있습니다 :

YourbrowserdoesnotsupporttheHTML5canvastag.

자바 스크립트 :

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);

»시도

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 () 메소드를 변환.

참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.

정의 및 사용

캔버스에 각 객체는 현재 변환 행렬을 보유하고 있습니다.

변환 () 메서드는 현재 변환 행렬을 대체합니다. 그것은 현재의 변환 행렬에 설명 매트릭스 작업입니다 :

C 전자
B 디 F
0 0 (1)

즉, () 변화가 확대 할 수 있도록, 회전 이동하고 현재의 환경을 기울.

참고 :이 변환은 변환 () 메소드가 추첨 후 호출에 영향을 미칠 것입니다.

참고 : 문제가 () 회전에 의해 변환 된 다른에 대해 () 메소드를 변환, 스케일 (), 번역 () 완료) (또는 변환.예를 들어 이미 두 번 도면에 설정 한 경우 다음 변환 () 도면을 확대 할 방법은 도면은 결국 4 배 확대됩니다.

팁 : 체크 아웃 사용해 setTransform () 다른 변환 동작에 대해 발생하지 않습니다 방법.

자바 스크립트 구문 : 컨텍스트 .transform (A, B, C, D, E, F);

매개 변수 값

参数 描述
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。

HTML 캔버스 참조 설명서 HTML 캔버스 참조 설명서