canvas 도형의 이동, 회전, 확대
html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); if(canvas.getContext){ var draw = canvas.getContext("2d"); draw.beginPath(); draw.fillStyle = "green"; //translate(이동할 x거리, 이동할 y거리) : 기준점 이동 draw.translate(100,0); //rotate(deg) : 시계방향 회전 draw.rotate(Math.PI*0.25); //scale(가로비율, 세로비율) : 확대/축소 draw.scale(2,1); draw.fillRect(0,0,100,100); } } </script> </head> <body> <canvas id="canvas" width="300px" height="400px"></canvas> </body> </html> | cs |
결과
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 svg 로 사각형 그리기 (0) | 2017.07.16 |
|---|---|
| HTML5/CSS3 canvas 클리핑(오려내기) (0) | 2017.07.15 |
| HTML5/CSS3 canvas의 save, restore : 설정 저장,복구 (0) | 2017.07.13 |
| HTML5/CSS3 canvas 에 텍스트 그리기 (0) | 2017.07.12 |
| HTML5/CSS3 canvas 에 이미지 띄우기 (0) | 2017.07.11 |