canvas

3. 그래픽에 관한 것. 해상도, PPI 등등

$DevicePixelRatio = \frac{물리적 픽셀}{논리적 픽셀}$ https://webglfundamentals.org/webgl/lessons/ko/webgl-resizing-the-canvas.html WebGL 캔버스 크기 조정 WebGL 캔버스의 크기를 조정하는 방법과 관련 문제 webglfundamentals.org getBoundingClientRect 를 사용하는 이유 기존 width 및 height 속성은 반드시 정수형으로 저장되기 때문에 엄밀한 값을 얻는데 한계가 있다. 반면 getBoundingClientRect를 통해서 얻는 width 및 height 값은 꼭 정수만으로는 저장되지 않기 때문에 엄밀한 크기의 값을 얻을 수 있다.

2. 도형 그리기

canvas 위에 도형을 그리는 법을 살펴보자. 종류는 크게 '호', '사각형', '선' 을 그리는 방법이 있다. 또한 '테두리'만 그릴 것인지, '면'도 함께 칠할 것인지 정할 수 있다. 1. 호 그리기 호를 그리는 명령어는 'arc'이다. 아래와 같이 사용하며 결과는 다음과 같다. (테두리만 그리기 위해 stroke()를 사용하였다) // 중심 x좌표, 중심 y좌표, 반지름, 시작점 각도, 끝지점 각도, 방향(true일경우 반시계 방향) context.arc(200, 200, 100, 0, Math.PI, true); context.stroke(); 위의 코드를 해석해보자. 호의 중심은 (200px, 200px)이며 반지름의 길이가 100px이다. 호는 0도부터 π도 (=180도)까지 반시계 방향으로..

1. canvas 기본 설정

1. 기본 세팅법 MDN의 정의에 따르면 html 문서 내에 그림 및 애니메이션을 표현하기 위해 사용하는 도구이다. canvas를 사용하기 위해서는 html 문서 내 canvas 태그를 선언하면 되며, 이후 JS 내에서 선언한 태그를 바탕으로 여러 옵션을 추가하여 사용하면 된다. 아래는 가장 기본적인 코드 구성이다. html로 canvas를 선언한 뒤, id 속성을 부여한다. JS 내에서는 id 속성을 통해 canvas 태그에 접근한 뒤, canvas의 context를 얻는다. 이후 canvas 내 무언가를 표현하고자 하는 명령을 내릴 때에는 context를 통하면 된다. const canvas = document.getElementById('canvas'); const context = canvas.g..