지 구 여 행

캔버스 크기 설정하기 캔버스 크기 설정 출력되는 이미지의 크기는 2번의 과정을 통해 설정합니다. ①HTML 또는 Javascript로 가상 캔버스의 크기를 설정하고, ②CSS를 통해 브라우저에 출력되는 이미지의 크기를 설정합니다. HTML Javascript const canvas = document.querySelector("#canvas") canvas.width = 300; canvas.height = 300; ※ CSS와 달리 HTML/Javascript에서는 사이즈 단위(px)를 표기하지 않습니다. CSS canvas { width: 300px; height: 300px; border: 5px solid black; } See the Pen Creating a drawing board on br..

기본 사용 방법 기본 메소드 드로잉 컨텍스트 ctx 의 다양한 메소드를 이용하여 선, 도형등을 그릴 수 있습니다. beginPath() : 새로운 경로(path) 생성 최초에는 호출하지 않아도 이미 경로(path) 하나가 존재합니다. 이전 경로와의 연결을 끊고 새 경로를 생성할 경우에 호출합니다. closePath() : 경로 닫기; 현재 하위 경로의 시작 부분과 연결된 직선을 추가 fill() 호출 시, 열린 도형은 자동으로 닫히게 되므로 closePath()를 호출하지 않아도 됩니다. stroke() 에는 적용되지 않습니다. stroke() : 윤곽선을 이용하여 도형 그리기 fill() : 경로의 내부를 채우기 moveTo(x, y) : 아무것도 그리지 않고 시작점을 (x,y) 좌표로 이동 (≒ 펜을..

Canvas API 기본 형태 Canvas API는 Javascript와 HTML element를 이용하여 그래픽을 그릴 수 있습니다. 요소는 그래픽을 위한 컨테이너 역할을 하며, 실제로 그래픽을 그리기 위해서는 Javascript를 사용해야 합니다. 주로 2D 그래픽을 그릴 때 사용되며 3D 그래픽에는 WebGL API를 사용합니다. HTML Javascript document.getElementById('canvas') 메소드는 'canvas' 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 canvas 객체를 반환합니다. HTMLCanvasElement.getContext(contextType) 메소드는 문서의 요소에 그래픽을 그리기 위한 방법 및 속성을 제공하는 객체를 반환합니다...