HTML 캔버스 translate() 메서드
예시
(10,10) 위치에 직사각형을 그리고 새로운 (0,0) 위치를 (70,70)으로 설정합니다. 같은 사각형을 다시 그립니다(사각형이 이제 (80,80) 위치에서 시작됨을 확인하세요.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| translate() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
translate() 메서드는 캔버스의 (0,0) 위치를 다시 매핑합니다.
참고: translate() 후에 fillRect()와 같은 메서드를 호출하면 값이 x 및 y 좌표 값에 추가됩니다.
| 자바스크립트 구문: | 컨텍스트 .translate( x,y ); |
|---|
매개변수 값
참고: 매개변수를 하나 또는 둘 다 지정할 수 있습니다.
| Parameter | Description | Play it |
|---|---|---|
| x | The value to add to horizontal (x) coordinates | |
| y | The value to add to vertical (y) coordinates |
❮ HTML 캔버스 참조