위키
포럼
도구
바뀐글
랜덤

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

10번째 줄: 10번째 줄:
var ctx = document.getElementById('myCanvas').getContext('2d');
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillRect(0,0,50,50);
ctx.fillRect(0,0,50,50);
ctx.translate(25,25);
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);
ctx.fillRect(0,0,50,50);
</script>
</script>

2015년 11월 2일 (월) 00:55 판

1 개요

HTML canvas translate() Method
HTML 캔버스 translate() 메소드
  • 기준점을 지정한 좌표로 이동하는 메소드

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 참고 자료

원본 주소 "https://zetawiki.com/w/index.php?title=HTML5_캔버스_translate()&oldid=155861"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}