Canvas transform() 메서드
정의와 사용법
화면상의 각 객체는 현재 변환 행렬을 가집니다。
transform()
메서드는 현재 변환 행렬을 대체합니다. 다음과 같은 행렬을 사용하여 현재 변환 행렬을 조작합니다:
a c e b d f 0 0 1
다시 말해,transform()는 현재 환경을 확대하고, 회전하고, 이동하고, 기울일 수 있습니다。
주의사항:이 변환은 transform() 메서드 호출 이후에 그려진 그래픽에만 영향을 미칩니다。
주의사항:transform() 메서드의 행동은 다음과 같은 변환에 비해 다릅니다: rotate()、scale()、translate() 또는 transform()로 수행된 다른 변환입니다. 예를 들어:그래픽을 두 배로 확대한 상태에서 transform() 메서드는 그래픽을 두 배로 확대하므로 그래픽은 네 배로 확대됩니다。
ヒント:보기 setTransform() 이 메서드는 다른 변환에 비해 행동을 하지 않습니다。
예제
사각형을 그려보세요;transform()로 새로운 변환 행렬을 추가하고 다시 사각형을 그려보세요;새로운 변환 행렬을 추가하고 다시 사각형을 그려보세요。변환을 호출할 때마다 이전 변환 행렬 위에 새로운 변환 행렬이 생성됩니다:
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> 요소를 지원하지 않습니다.