-
CANVAS 연습9(도형 회전)게임/HTML 연습 2018. 6. 25. 22:51반응형<!DOCTYPE html><html><head><meta charset="UTF-8"><title>canvas 연습9</title></head><body><canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
//회전시키기ctx.fillStyle = "yellow";ctx.strokeStyle = "black";ctx.lineWidth = 5;ctx.strokeRect(100, 100, 100, 100);ctx.fillRect(100, 100, 100, 100);ctx.rotate(5 * Math.PI / 180); //시계방향으로 5도만큼 사각형을 회전시킨다.ctx.strokeRect(100, 100, 100, 100);ctx.fillRect(100, 100, 100, 100); //5도 회전한 사각형ctx.rotate(5 * Math.PI / 180); //시계방향으로 5도만큼 추가로 회전시킨다.ctx.strokeRect(100, 100, 100, 100);ctx.fillRect(100, 100, 100, 100); //10도 회전한 사각형</script></body></html>결과:
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습11(색상 변경) (0) 2018.06.27 CANVAS 연습10(기울임) (0) 2018.06.26 CANVAS 연습8(그림자, 위치 이동, 크기 변형) (0) 2018.06.25 CANVAS 연습7(글씨 정렬) (0) 2018.06.25 CANVAS 연습6(글씨 쓰기) (0) 2018.06.25
