위키
포럼
도구
바뀐글
랜덤

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

잔글 (봇: 자동으로 텍스트 교체 (-== 참고 자료 == +==참고==))
5번째 줄: 5번째 줄:


==예시==
==예시==
<source lang='html5'>
<source lang='html5' run outheight='150'>
<canvas id='myCanvas' width='100', height='100'></canvas>
<canvas id='myCanvas' width='100', height='100'></canvas>
<script>
<script>
20번째 줄: 20번째 줄:
</script>
</script>
</source>
</source>
<jsfiddle height='150'>45ozndox</jsfiddle>


==같이 보기==
==같이 보기==

2021년 5월 13일 (목) 21:42 판

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

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