HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML canvas setTransform() 메서드

setTransform()는 Canvas 2D API는 현재 변환을 단위 행렬로 재설정(덮어쓰기)하고 변환 메서드를 호출합니다. 이 변환은 메서드의 변수로 설명됩니다.

온라인 예제

다시 그려서 다시 setTransform()를 사용하여 새로운 변환 행렬을 생성하고, 다시 그려서 새로운 변환 행렬을 생성한 다음 다시 그려서, setTransform()를 호출할 때마다 이전 변환 행렬을 초기화하고 새로운 행렬을 구축합니다. 따라서 아래의 예제에서 빨간 사각형은 레드 사각형 아래에 있기 때문에 표시되지 않습니다:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas setTransform() 메서드 사용-기본 튜토리얼(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML5　canvas 태그.
</canvas>
<script>
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);
</script>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome 및 Safari가 setTransform()를 지원합니다. 메서드.

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

정의 및 사용법

캔버스 위의 각 객체는 현재 변환 행렬을 가지고 있습니다.

setTransform() 메서드는 현재 변환을 기본 행렬로 초기화한 후 동일한 매개변수를 사용하여 실행합니다. transform().

다시 말해, setTransform()는 현재 환경을 확대, 회전, 이동 및 기울이는 것을 허용합니다.

주의:이 변환은 setTransform() 메서드 호출 이후에 그리기를 영향을 미칩니다.

JavaScript 문법:	context.setTransform(a,b,c,d,e,f);

파라미터 값

파라미터	설명
a	수평으로 확대하는 그리기.
b	수평으로 기울이는 그리기.
c	수직으로 기울이는 그리기.
d	수직으로 확대하는 그리기.
e	수평으로 그리는 이동.
f	수직으로 그리는 이동.

HTML canvas 참조 설명서

HTML: <template> 태그