Canvas transform() 메서드

정의와 사용법

화면상의 각 객체는 현재 변환 행렬을 가집니다。

transform() 메서드는 현재 변환 행렬을 대체합니다. 다음과 같은 행렬을 사용하여 현재 변환 행렬을 조작합니다:

a  c  e
b  d  f
0  0  1

다시 말해,transform()는 현재 환경을 확대하고, 회전하고, 이동하고, 기울일 수 있습니다。

주의사항:이 변환은 transform() 메서드 호출 이후에 그려진 그래픽에만 영향을 미칩니다。

주의사항:transform() 메서드의 행동은 다음과 같은 변환에 비해 다릅니다: rotate()scale()translate() 또는 transform()로 수행된 다른 변환입니다. 예를 들어:그래픽을 두 배로 확대한 상태에서 transform() 메서드는 그래픽을 두 배로 확대하므로 그래픽은 네 배로 확대됩니다。

ヒント:보기 setTransform() 이 메서드는 다른 변환에 비해 행동을 하지 않습니다。

예제

사각형을 그려보세요;transform()로 새로운 변환 행렬을 추가하고 다시 사각형을 그려보세요;새로운 변환 행렬을 추가하고 다시 사각형을 그려보세요。변환을 호출할 때마다 이전 변환 행렬 위에 새로운 변환 행렬이 생성됩니다:

您的浏览器不支持HTML5 canvas标签。

JavaScript:

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

직접 시도해 보세요

문법

context.transform(a,b,c,d,e,f);

파라미터 값

파라미터 설명
a 수평 축소 그래픽.
b 수평 기울기 그래픽.
c 수직 기울기 그래픽.
d 수직 축소 그래픽.
e 수평 이동 그래픽.
f 수직 이동 그래픽.

浏览器支持

표中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox 사파리 오퍼라
Chrome Edge Firefox 사파리 오퍼라
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.