Why
여러가지 UI를 제작하고 해당 UI를 필요한 기능과 연동하여 사용자 행동 및 입력에 따라 유용한 정보를 보여줄수 있는 기능 제작 연습 중, 다양한 모양 및 그래픽을 표현하고자 Canvas를 사용하게 되었다.
기초 - 곡선 - 응용 - 애니메이션 순의 학습 포스팅 목표
Canvas
canvas에는 width와 height 두가지 속성만이 존재하며, 이를 통해서 넓이와 높이를 설정할 수 있다. 따로 지정하지 않는다면 300(w) x 150(h)가 자동적으로 설정된다.
<canvas id="mycanvas" width="300" height="300"></canvas>css를 통해 canvas 태그에 대해 스타일 속성 height, width를 설정할 수 있지만 이 부분은 html태그 속성을 통한 설정과는 다른 부분으로 canvas 자체의 크기 설정은 아니다.
참고: 노트: 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고
<canvas>속성에서width및height속성을 명시적으로 지정하십시오. - mozilla
오래된 브라우저에는 (아마도 익스플로러) 지원하지 않을 수도 있기에 엘리먼트 내부에 자식 엘리먼트로서 지원하지 않는 브라우저에 대해 대체 콘텐츠를 표시할 수 있다.
<canvas id="mycanvas" width="300" height="300">
<img src="http..."/>
//어떤 형태든 가능
</canvas>이때문에 닫는 태그인 </canvas>는 필수적으로 필요하다.
canvas는 getContext()를 통해서 랜더링 컨텍스트와(의) 그리기 함수에 접근이 가능하며,
해당 메소드는 랜더링 컨텍스트의 타입을 지정하는 파라미터를 가지게 되는데 여기서는 '2d'를 파라미터로 사용하여 CanvasRenderingContext2D 인터페이스를 사용한다.
let canvas = document.getElementById('mycanvas');
if (canvas.getContext){ //getContext존재여부를 통해 프로그래밍적으로 지원하는지 검토.
//정상적으로 지원한다면
var ctx = canvas.getContext('2d');
//getContext 메소드를 사용하여 드로잉 컨텍스트에 접근할 수 있다.
//파라미터 '2d'를 넣어 CanvasRenderingContext2D 사용.
ctx.fillStyle = 'green';//채우기 색상
ctx.fillRect(10, 10, 100, 100);//사각형 그리기
...
//원하는 형태를 그리는 코드 작성
} else {
//지원하지 않을시 코드
}getContext()의 그리기 함수 - mozilla
💡사각형
fillRect(x, y, width, height)
색칠된 직사각형을 그립니다.
strokeRect(x, y, width, height)
직사각형 윤곽선을 그립니다.
clearRect(x, y, width, height)
특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.
💡 경로
beginPath()
새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.
closePath()
현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.
stroke()
윤곽선을 이용하여 도형을 그립니다.
fill()
경로의 내부를 채워서 내부가 채워진 도형을 그립니다.
path 메서드는 물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다.
💡 지점 이동 (시작하고자 하는 부분의 변경 -> 펜의 위치를 옮기는것과 같다 )
moveTo(x, y)
지점을 x와 y 로 지정된 좌표로 옮깁니다.
💡 선 (직선적인 선)
lineTo(x, y)
현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.
💡💡 호(arc)
arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x, y) 위치에 원점을 두면서, 반지름 r을 가지고, startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.
arcTo(x1, y1, x2, y2, radius)
주어진 제어점들과 반지름으로 호를 그리고, 이전 점과 직선으로 연결합니다.
💡💡💡 곡선 (베지어 곡선 & 이차 곡선)
quadraticCurveTo(cp1x, cp1y, x, y)
cp1x 및 cp1y로 지정된 제어점을 사용하여 현재 펜의 위치에서 x와 y로 지정된 끝점까지 이차 베지어 곡선을 그립니다.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(cp1x, cp1y) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 x 및 y로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.
매우 기초적인 Canvas
다음 Canvas 포스팅에는 배지에 곡선과 이차 곡선을 사용하여 데이터를 표현하는 방식에 대해 포스팅 할 예정이다.
