추천 과정:

Canvas 참조 설명서

Canvas translate() 메서드

정의와 사용법 translate()

주의事项:translate() 메서드 후에 fillRect()와 같은 메서드를 호출할 때, 캔버스 위의 (0,0) 위치를 재지도화합니다. fillRect() 와 같은 메서드를 호출할 때, 값이 추가됩니다. x 및 이 좌표 값에.

translate() 메서드의 시각화

예제

위치 (10,10)에서 사각형을 그립니다. 새로운 (0,0) 위치를 (70,70)로 설정합니다. 다시 새로운 사각형을 그립니다. (주의: 지금 사각형은 (80,80) 위치에서 그립니다):

브라우저에서 HTML5 canvas 태그를 지원하지 않습니다.

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

파라미터 값

파라미터 설명
x 평면 좌표(x)에 추가된 값.
이 높이 좌표(이)에 추가된 값.

브라우저 지원

표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

Canvas 참조 설명서