HTML canvas translate() 메서드
정의와 사용법
translate() 메서드를 호출하여 캔버스 위의 (0,0) 위치를 다시 매핑합니다.
주의사항:translate() 뒤에 fillRect()와 같은 메서드를 호출할 때 fillRect() 과 같은 메서드를 사용할 때, 값이 추가됩니다 x 그리고 y 좌표 값에 대해.
예제
位置(10,10)에 사각형을 그려 새로운 (0,0) 위치를 (70,70)로 설정합니다. 다시 새로운 사각형을 그립니다（이제 사각형은 (80,80)에서 그려집니다）:
JavaScript:
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);
문법
context.translate(x,y);
파라미터 값
| 파라미터 | 설명 |
|---|---|
| x | 수평 좌표(x)에 추가할 값을 |
| y | 수직 좌표(y)에 추가할 값을 |
브라우저 지원
표에서는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 기재했습니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
