프로그래밍/HTML

rotate() 함수. 회전의 중심은 항상 canvas의 시작점 입니다. 여기서 문제가 됩니다. 도형의 중심축을 기준으로 회전하지 않고 시작점을 중심으로 회전하기 때문에 도형이 제자리에서 회전하지 않는 문제가 생깁니다. 이때는 translate()로 도형의 가로길이/2, 세로길이/2 만큼 이동해서 회전한 후 다시 제자리로 돌아와야 도형이 제자리에서 회전한듯 보입니다. 아래 코드를 살펴봅니다. 첫번째 도형을 15도 정도 회전시켜 봅니다. ctx.rotate((Math.PI / 180) * 15); 시작점을 기준으로 15도 회전 됩니다. 두번째 도형은 45도를 회전 시켜지만 제자리에서 회전한듯 보입니다. ctx.fillRect(150, 30, 100, 100); ctx.translate(200, 80); /..

setTransform, transform에 대해서 알아보자. 수평기울기, 수직기울기에 대한 변형을 줄 수 있다. setTransform 을 이용해서 사각형의 기울기를 적용해 봤다. Your browser does not support the HTML5 canvas tag. ctx.setTransform(1, 0.5, -0.5, 1, 30, 10); ctx.setTransform(a,b,c,d,e,f) 매개변수 정의 a : 가로배율 (1)는 100% b : 수평기울기 (0.5)는 45도 기울어짐 c : 수직기울기 (-0.5)는 수직으로 -45도 기울어짐 d : 수직배율 (1)는 100% e : x 좌표 f : y 좌표 setTransform 과 transform 의 차이는 무엇인가 ? 다음 코드를 확인해..

참조링크 Canva API https://developer.mozilla.org/ko/docs/Web/API/Canvas_API Canvas API - Web API | MDN Canvas API는 JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용 developer.mozilla.org Canvas의 활용.. 이미지를 그릴 수 있다. 그리는 방법은? 태그 사용. 3D 모양은 WebGL, OpenGL 을 사용한다. var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); var ..