"HTML5 캔버스 translate()"의 두 판 사이의 차이

2021년 5월 13일 (목) 21:45 기준 최신판

1 개요[ | ]

HTML canvas translate() Method
HTML 캔버스 translate() 메소드

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

2 예시[ | ]

<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>

3 같이 보기[ | ]

4 참고[ | ]

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

@@ 2번째 줄: / 2번째 줄: @@
 ;HTML canvas translate() Method
 ;HTML 캔버스 translate() 메소드
-*기준점을 지정한 좌표로 이동하는 메소드
+*기준점을 지정한 크기(x증분, y증분)만큼 평행이동하는 메소드
 ==예시==
-<source lang='html5'>
+<syntaxhighlight lang='html5' run outheight='150'>
 <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.fillStyle = 'red';
+ctx.fillRect(0,0,50,50);
+ctx.translate(25,25);
+ctx.fillStyle = 'blue';
 ctx.fillRect(0,0,50,50);
 </script>
-</source>
+</syntaxhighlight>
-<jsfiddle height='150'>45ozndox</jsfiddle>
+==같이 보기==
+*[[HTML5 캔버스 scale()]]
+*[[HTML5 캔버스 rotate()]]
+*[[HTML5 캔버스 transform()]]
+*[[HTML5 캔버스]]
+*[[평행이동]]
-==참고 자료==
+==참고==
 *http://www.w3schools.com/tags/canvas_translate.asp
 [[분류: HTML5 캔버스]]