HTML5 캔버스 translate()

개요

HTML canvas translate() Method

HTML 캔버스 translate() 메소드

• 기준점을 지정한 크기(x증분, y증분)만큼 평행이동하는 메소드

예시

<canvas id='myCanvas' width='100', height='100'></canvas>
<script>
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillRect(0,0,50,50);

ctx.translate(25,25);
ctx.fillStyle = 'red';
ctx.fillRect(0,0,50,50);

ctx.translate(25,25);
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,50,50);
</script>

같이 보기

• HTML5 캔버스 scale()
• HTML5 캔버스 rotate()
• HTML5 캔버스 transform()
• HTML5 캔버스
• 평행이동

참고

• http://www.w3schools.com/tags/canvas_translate.asp